Hello everyone!!!
I made a lottie animation which works when page is scrolling, but the % of the page is not the same in mobile and desk version, something obvious, and I don’t know how to fix that… When I change the % in the mobile view it changes for every view…
Any idea?
Thanks!!!
Here is my public share link: LINK
(how to access public share link)
You can restrict interactions based on breakpoint in the Trigger settings of any given animation:
Just update your current interaction so it only appears on desktop, duplicate it, set it to only trigger on mobile, and adjust the percentages accordingly 
Thanks @mikeyevin for the instructions!
I’m finding some difficulties, when I duplicate it and change the trigger setting for one of the animations, the others change too… I’m sure it’s easier than it seems, but I couldn’t find the solution 
When you duplicate the interaction, you’ll need to make sure you’ve selected this new interaction (I believe by default it adds the number 2 to the end) as it may be defaulting to your original selection.
If you’re still having trouble, can you share your read-only link so I can take a closer look?
Hello. I’m having a very similar problem. When I duplicate the interaction and select mobile only. It mimics that choice for my initial interaction. So mobile is auto checked for both interactions. If i change one or the other, it changes the setting for both.
@Dave_Amarillo & @Cristian_Sanchez
I think I see where the problem is, you’ll need to create an entirely separate Page/Element Trigger:
I tried that. It’s still doing the same thing. Here is what started my issue. If you look at the mobile version. When you scroll down and wait for a few seconds. It seems like the screen is too wide. It scrolls to left. Like something is over-sized or out of the frame. I think its the interaction but I can’t seem to fix it. It’s only an issue in mobile view.
Btw. Thank you for your help!
Here’s what I see after making the adjustment on my end:
Edit: Are you saying you’re having an issue with the transition itself and not when it’s triggering? If so, my apologies, I thought you were having a separate issue.
I followed your steps and separated them. That worked. But now the mobile interaction is buggy. Any advice?
Glad you got the two separate interactions triggering properly! There’s probably a number of adjustments you’ll need to make on your mobile animation especially with positioning—is there something specifically that’s not working how you’d expect it to?
My problem is that I would like the headings to scroll all the way off the page but when I set them to move 500px, then it significantly widens my screen view just on mobile. Makes the page sloppy.It scrolls back and forth. I finally just used one interaction and set it up to work with mobile and settled on how it works with the other views. I’ll keep playing with it till I figure out where I’m off. Thank you for your help!
Ah, so I would recommend adding an additional style to set the overflow-x of the hero section to hidden which will prevent those elements from breaking the available viewport width.
I’d also encourage you to use percentages to define the amount of movement instead of pixels as it’s less dependent on viewport size. For example, if you want an element that takes up the whole width of the screen to move left completely off the screen, you’d set it move 100% to the left. If you work in pixels you’re going to overshoot the boundaries of your window on smaller screens and potentially affect the timing of your animations—especially when using any form of easing.
@mikeyevin Thanks!!! that has worked for me!! creating a new page trigger and then duplicating the animation was the way to make it works 
Thanks again