Hi. I have made two animations. The first one is not looped but the second one has to be looped. The first animation lasts 10 seconds. So what I want is when those 10 seconds of animation finished I want the div block with the first animation to hide (by opacity or show/hide interaction) and automatically to show the another div block with the second animation on the same place. And I want the first animation end frame to match the second animation start frame ( so it kind of loops seamlessly) Is this possible? Maybe with “scroll into view” interactions and I can set 10 seconds delay for second divblock (that contains second animation) to show up and for the first divblock 10 sec delay to hide? I didnt practise with that yet just dont want to waste my time if thats not possible to do, thats why I am asking. Thanks
Seriously!!!
Yes. Will experiment with this anyways (if no one replies). But waiting for reply first
Thanks. So it seems like my method will not work. Only scripting. I dont know scripting other than pasting someones else script into the head or body tag, so hopefully its just like that. Will check this out
Essentially any time you want to customize the behavior of your site, or do anything that isn’t natively built into Webflow, you’ll need scripting.
What you’re wanting here is not very complex but it does depend a lot on understanding the video player approach you’re using, how to control it and respond to events, as well as basic DOM manipulations.
Most designers either learn scripting, or to hire a dev for those aspects of their projects.
Thanks. But to anyone who experiencing same problem, I experimented with it and to my surprise it worked with interactions only. Set “Autoplay” for the first animation (which I called “part1”) and set “Autoplay” and “Loop” for a second animation (which I called “part2”). And set the “Position” so that “part1” sits on top of the “part 2” animation (not under or below…). I set “part2” to “Relative” and “part1” to “Absolute” and width and hight 100% for both. Add element trigger “Scroll into view” to the divblock that contains both of your animations. And then I just set up the interactions like this. My first animation last 9.28 seconds (so input your own duration there) Works perfectly.
When you say “animations” do you mean Videos as you have in the title, or do you mean something else like Lotties?
Interactions do have good Lottie control, but I’ve never seen them used to trigger a Video playback, or be triggered by a Video pause/stop. It would be quite useful though.
Not lottie. I have made my 2D animation in After effects and saved in MP4 format (not json). So yes, interactions triggering a video playback. I added Background video element. My first animation last 9 seconds, so interaction is hiding it exactly after 9 seconds (because as you can see I set 9sec in duration) and then another interaction is showing the second animation. So simple Hide/Show interaction triggering the playback of the second video (Autoplay of the second video doesnt work until the video is shown, set to “Block” in interaction settings). I was kind of happy when it worked.