Timeline fromTo and back to original state

[No Dead Fish]

Hi, 

 

I'm trying to create an animation that sets the element back to the original size of the element but I can't make it work. 

 

The scrollable element has to go from 80svw width and 80svh height to 100svw and 100svh but it also has to go back to 80svw and 80svh at the end of the animation. Can someone tell what I have to add to the js to make it work?

 

Thanks in advance!

 

Very best,

Bart

See the Pen VwVJRNZ by Bart-van-de-Ven-the-sans (@Bart-van-de-Ven-the-sans) on CodePen

[mvaneijgen]

Hi @No Dead Fish welcome to the forum!

 

Can you give us a bit more. What element needs to be the parent of what element, is there any additional CSS, you use jQuery, any particular version?

 

I've whipped up the following, but I'm just guessing. Sharing your JS is great, but it is just 1/3 of the whole issue. 

 

See the Pen VwVJNQj?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

[No Dead Fish]

Sure! I use Webflow to build the website, so I can share the HTML and CSS via this link: https://preview.webflow.com/preview/expandable-showcase?utm_medium=preview_link&utm_source=designer&utm_content=expandable-showcase&preview=7ec2f683b9be87859fbeda29dd265e29&workflow=preview, on the staging domain you can see how the interaction is currently working (https://expandable-showcase.webflow.io/). 

 

I want the animation to go back to it's original state at the end of home header section. I hope the links above give you a better understanding of the HTML and CSS, if not, please let me know!

[mvaneijgen]

On 8/12/2023 at 7:05 PM, mvaneijgen said:

Can you give us a bit more. What element needs to be the parent of what element, is there any additional CSS, you use jQuery, any particular version?

 

My question was more in the minimal demo,  we can't really debug live websites, there is just no way to modify the code. 

 

I've updated my demo with the following code. Notice there is no ScrollTrigger. This because the best thing to do when working with ScrollTrigger is to remove it! This seems counter intuitive, but ScrollTrigger is just animating something on scroll, so just focus on the animation at first and only when you're happy with the animation add ScrollTrigger back in. This way you can focus on one part at a time and it will save a lot of headache when debugging. 

 

I've also changed width and height to be scale instead. Transform properties are much beter to animate on the web, they don't cause a layout shift, so it is less work for the browser and thus more performant. 

 

See the Pen YzRmrzZ?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

 

If that is doing what you want you can enable ScrollTrigger again and then it will look something like this 

 

See the Pen XWyveXJ?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

 

I've taken these tips from this video on the Greensocks YouTube channel, so be sure to check them out

 

 

Hope it helps and happy tweening! 

[No Dead Fish]

Thanks for your reply. I tried implementing the code you wrote but it caused some weird issues on the live website.

 

A colleague of mine managed to fix it this morning using the following script: 

 

And this seems to be doing the trick as well. Thanks again for your reply! I appreciate it a lot. 

 

Very best,

 

Bart