How to speed up animation / make transitions work in conjunction

[amitr95]

I have an animation where paths in SVGs are changing alongside content, as a user scrolls.

 

The issue I'm having is that my SVG animation (fill) is happening faster than my opacity animation. What this does is it shows the fill, but my content opacity remains at 0 until a user scrolls more down (giving it an active effect, but not showing the content). See image here for context.

 

I've tried to play around with duration (i.e. opacity: 1, duration: 0.5), but no luck.

 

There's also instances where my SVG path doesn't have the desired fill (has a white, inactive fill) alongside text. See image here for context.

 

When an SVG shape (.onion__shape-x) changes, I'm trying to make it so that the current orange fill (#f15a40) fade out gradually as the user scrolls, and it applies to the shape it is scrolling towards.

 

I've ordered the fromTo accordingly, but it doesn't seem to work either.

 

 

See the Pen jOQzbyp by amit_rai95 (@amit_rai95) on CodePen

[akapowl]

Hello @amitr95.

 

You'll probably want to have a look at the position parameter, which lets you change the position of individual tweens on a timeline.

 

I'm not sure the fork of your example below does exactly what you were looking or, but that's an example of how to use it.

 

More info on that here:

 

See the Pen vYQRNvJ by akapowl (@akapowl) on CodePen