Three scroll triggered animations on one object. Can it be done?

Hi all,

My links are below for your reference.

In my nav bar, I have a badge in the center which contains the logo. The nav and badge have a fixed position. The goal is to have the badge spin like a wheel and blur mid-spin. During this blur, I am trying to replace the badge with the title of the next section of the landing page (styled in the same way as the logo). This combo of animations is set to be triggered when the following section scrolls onto the page.

The method I have chosen is to use an image of the badge and drop its opacity to 0% during the spin and blur animations revealing the next title behind.

I have also added all the same animations to the replacement badge with an opacity change that starts at 0 and ends at 100% instead.

The problem I am having is when I add the opacity change to the rest of the interactions the whole thing pretty much breaks. Prior to adding the opacity change the spin and blur work just fine on the logo running forward and back.

What am I doing wrong? Am I approaching this the wrong way or am I setting up the animations wrong? Any help would be greatly appreciated.

Tony


Here is my public share link:
https://preview.webflow.com/preview/tonys-first-project-b8682a?utm_source=tonys-first-project-b8682a&preview=cab41a4f337464c3d25a0ff4352cd4ab

Here is my published site:
http://tonys-first-project-b8682a.webflow.io/

When you need multiple triggers at the same place, you can nest elements and use them as triggers. For example a series of threee nested divs.

For legibility of my designs and IX, even if I have only one trigger, I frequently use an element just for that. So instead of using a designed element as a trigger, I’d wrap it in another div that I clearly call “Trigger”, and hook this one to the animation.

2 Likes

@vincent,

Thanks for the reply!
I am currently using a section element as a trigger when it scrolls into the viewport. That event is providing the trigger for all three animations applied to an img on the page that is separate from the section element.

You’re saying I need to separate the triggers to empty divs? I will give that a shot. I was under the impression that one event could trigger multiple interactions but your way sounds much more organized.

After trying your suggestion, the animations are not triggering on the first pass. I scroll the divs into view and nothing happens I scroll them out of view and back and the animations trigger.

Hey there,

I’m looking at the interaction but I only see the rotation property in there but no blur or opacity changes and I don’t see the second image that replaces the spinning logo. Have you taken those out?
The beauty of Interactions 2.0 is that you’re able to apply all of the property changes (to all of the objects) in a single timeline. I think I’m understanding you correctly.

I do see you have a separate “blur” animation in there but for everything to happen simultaneously, you’ll need those property changes in the same timeline as your rotation animation.

Hey Port_of_Folio,

Sorry, I have been running through some trial and error on this as I am trying to get this landing page done in the next week and there is a lot more to it than what I have as of now.

I think you hit on the problem though. I had all of the animations in different timelines with the same trigger instead of one timeline.

What you say makes a lot of sense. All three animations need to happen at the same time and I guess I just assumed that they each needed a timeline in order to do that. Akin to animation software (e.g. after effects).