Streaming live at 10am (PST)

Trigger html animations on scroll


#1

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


#2

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? http://help.webflow.com/faq/how-do-i-share-my-sites-read-only-link

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.


#3

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.


#4

This topic was automatically closed after 60 days. New replies are no longer allowed.