Animate timeline value inside Scrolltrigger from X to Y then to X again.

[mroddev]

Hello.

I had previously a problem in Safari when using clip-path to animate a shape with scrolltrigger. Thread here: 

 

 

So I went ahead and over engineered a solution that solves the problem just with a small issue.

The solution pen: 

Now I need to animate the shape Rect rx value from 40 to around 280 (when it hits around 30% of the animation scrolled) and back to 40 again.

The main goal here is to make the animation feel like this pen: 

See the Pen WNPydEZ by marcorodriguesdev (@marcorodriguesdev) on CodePen

 (pen from previous issue). If you take a closer look, you can see the radius animates while the shape is decreasing size until it's a full pill shape.

 

I have tried animating the svg rect rx property with the position parameter but without success because of overwrite problems.

 

 

See the Pen MWLPmpG by marcorodriguesdev (@marcorodriguesdev) on CodePen

[GreenSock]

I don't have a lot of time to dig into this right now, but I'm having a hard time understanding what exactly the problem is and what you mean by "...but without success because of overwrite problems." 

 

When I remove all the GSAP code and just look at your demo in Safari, the clip-path doesn't work at all. I don't see the video, period. Weren't you trying to do this without clip-path because Safari botches it so much? 

 

Have  you thought of just using a normal <div> with overflow: hidden and a border radius? And then you could animate its height/width and counter-animate the top/left of the absolutely positioned video child? Just an idea; I'm not sure how hard it'd be.

 

But if you could try to be SUPER clear about exactly what the problem is and how we can reproduce it, that'd be swell. 

[mroddev]

11 hours ago, GreenSock said:

I don't have a lot of time to dig into this right now, but I'm having a hard time understanding what exactly the problem is and what you mean by "...but without success because of overwrite problems." 

 

When I remove all the GSAP code and just look at your demo in Safari, the clip-path doesn't work at all. I don't see the video, period. Weren't you trying to do this without clip-path because Safari botches it so much? 

 

Have  you thought of just using a normal <div> with overflow: hidden and a border radius? And then you could animate its height/width and counter-animate the top/left of the absolutely positioned video child? Just an idea; I'm not sure how hard it'd be.

 

But if you could try to be SUPER clear about exactly what the problem is and how we can reproduce it, that'd be swell. 

Sorry for the confusion, it's a bit hard to explain.

 

In short, if you ignore the safari problem from the first pen above, this is the animation I want in the second pen. The second pen is currently pretty much the same as the first one but without the radius animation.

 

I have updated the second pen with the problem I mentioned above, just added two animations at the end of the timeline to change the radius of the shape.  You can currently see that when scrolling down the radius doesn't quite animate like the first pen and also when scrolling up (after you've passed the animation) you can see the overwrite problem I mentioned and the radius being janky.

 

I'm not sure if the problem is still clear tho 🤔

 

 

[mroddev]

11 hours ago, GreenSock said:

I don't have a lot of time to dig into this right now, but I'm having a hard time understanding what exactly the problem is and what you mean by "...but without success because of overwrite problems." 

 

When I remove all the GSAP code and just look at your demo in Safari, the clip-path doesn't work at all. I don't see the video, period. Weren't you trying to do this without clip-path because Safari botches it so much? 

 

Have  you thought of just using a normal <div> with overflow: hidden and a border radius? And then you could animate its height/width and counter-animate the top/left of the absolutely positioned video child? Just an idea; I'm not sure how hard it'd be.

 

But if you could try to be SUPER clear about exactly what the problem is and how we can reproduce it, that'd be swell. 

I just solved my problem with your suggestion of wrapping the content with a <div> with overflow hidden and animate that div instead. Animating the radius of a div works exactly like I wanted instead of animating the RX of a Svg Rect.