How do you set the Opacity timings on text during an interaction?
I’m attempting to use the new interactions, everything was running smoothly until I tried to change the speed at which text goes from 0 - 100%. I can preform the same thing on other elements by altering the easing duration, however this doesn’t seem to work on text, or even text inside other elements.
Am I missing something?
What are you trying to animate? Share you read-only link.
If you could take a look at the final ‘menu’ div in the animation, and the second ‘Heading-1’. The pair ‘should’ be transitioning opacity from 0-100% over a few seconds, however they’re not.
https://preview.webflow.com/preview/movie-614113?preview=8c8e08a68ed6c273b1625ff74cde687d
Are referring to the second Sky Fall that comes from bottom?
No the second James Bond, The first is blurred then I wanted the second to fade in over it, it just appears in an instant.
Also the Menu div I want to fade in instead of appear in an instant also.
Okay, the first James Bond has the lower opacity, blurred. But it doesn’t have a fade out, so the second that comes in makes both show; and they’re both in the same keyframe set.
You have:
Intro wrapper - James Bond
1 H1 - James Bond
1 H1 - James Bond
Why not use 1 James Bond - have it come in from 0 opacity to 100? Why the duplication?
Just FYI, you don’t need to use SVG’s for the div circles, you can have:
Because I want the blurred effect when the barrel expands, and then I wanted that to fade and the solid text appear. Blur can’t be transitioned with interactions so I need to use two separate headers to achieve this.
The SVG classes are CSS placeholders which will be replaced with SVGs for the barrel of the gun. I need the detail which can’t be achieved with CSS.
EDIT: I placed the header in a keyframe of it’s own to see if that was the issue and it’s still preforming the same instant transition and ignoring the ease timing.
Ah gotcha… okay… so take the first James Bond text layer and do your inital states in css styles. It’s easier to manage. Initial states with interactions gets a little too confusing, in my opinion. Plus that’s less load on your entire animation.
Then bring it in with interactions. It also allows for a simple effect when it’s over, you simply add everything to origin.
What do you think of this adjustment?
I’ll give it a whirl now and let you know how it goes, thanks…
I’ve left the initial states there as it would mean messing around with trying to position it all in the centre later, right now everything is aligned centre.
Bringing the blur in like that does look better, however the opacity is still an instant transformation, I think it’s just glitched, I’ll test it in another project. Failing this I could try changing the text colour to 0 opacity.
Okay good… I’d like to see what it looks like when you finish!