Trigger html animations on scroll

[Hector_Castro]

Hey guys, this is a two-in-one question blog post. I have a couple of html animations which I created in Adobe Animate and Tumult Hype and I’m currently hosting on Dropbox.

The first type of animations are banner animations and I want them to be triggered when the user scrolls into view. I was able to embed them inside a div and it worked but by the time the user scrolls into view they were already finished. I tried using the Scroll interaction but it didn’t work. What else could I use?

The second type of animations are hover animations. At the minute I have svgs representing each of the services my client offers but I want to replace the svg with a html animation when the user hovers over. I don’t have a clue on how to even start this.

Any ideas?
@Waldo @PixelGeek @cyberdave @VladimirVitaliyevich @thewonglv

[cyberdave (Dave S.)]

Hi @Hector_Castro, do you have a link to the animations and could you share the embed code you were using?

Could you share the link to your site? Share a read-only link | Webflow University

Also, which page are you embedding the animations? The more information that can be provided, the easier it will be to help find a solution.

[Hector_Castro]

Hi @cyberdave, thanks for your reply.

Here is the link to my site :
https://preview.webflow.com/preview/nwo?preview=9f8eaa1435eae4ab0072536b9a0231de

This is the banner that I want to animate when scrolled into view: If you load the page and scroll quickly enough, you can see the animation happening.

This are the icons that I want to replace with an HTML animation when hovered. At the minute they just change color.

This is the code that I have embedded using the :

iframe src=“https://dl.dropboxusercontent.com/spa/ixxhacwcfd8nibv/
Exports/ArctitudProactiva/ArctitudProactiva.html” width=“1200px” height=“auto”>

Here is the link to the files in dropbox, I used Tumult Hype and I used the inbuilt “upload to Dropbox” function.