Али К

Hello @h-amad , are you looking for something like this animation ? GSAP Display not synced (codepen.io)

Hello @whizzbbig , There might be better ways to accomplish this animation , such as 3D card Animation on hover (codepen.io)

Hello @Pauline Brothier , the problem inside the lottiefile you can check this link http://airbnb.io/lottie/#/supported-features also I see that you are using Base64 image in your json file , Bas64 encoded images are good practice for a small size (KB) images. https://www.davidbcalhoun.com/2011/when-to-base64-encode-images-and-when-not-to/. I suggest to use other way for this animation because it's 3D animation, please check this pen : https://codepen.io/osublake/pen/VwaKMpw/2152a28cffe2c2c0cca8a3e47f7b21c6 Have a nice day

Hello @Paulina , I have checked you pen and your website , and I saw that is the problem in your JSON file Failed to load resource: net::ERR_HTTP2_PROTOCOL_ERROR /grace/wp-content/uploads/2022/03/box-animation.json:1 check the console

Hello @Moses , I think you need to use MorphSVGPlugin

Hello ,@codanux change the end to be like end: 'bottom bottom', const timeline2 = gsap.timeline({ scrollTrigger: { id: 'section2', trigger: '#section2', scrub: true, markers: true, pin: true, start: 'top top', end: 'bottom bottom', pinSpacing: true, // end padding problem endTrigger: '#section3' } });

Hello @Vijith , you can check my solution https://codepen.io/itsalimanuel/pen/oNpLXyY?editors=1010 Have a nice day ?

Hello @dc65k , you mean something like this ? https://codepen.io/itsalimanuel/pen/yLMGNEK/17f5ec8b40f835f2abf9dcf531a13d60?editors=0010

Exactly , so the point it was to add this line ? .add(() => ScrollTrigger.refresh()) Many thanks @OSUblake

Hello @OSUblake, no , sorry I add another link ? the correct link https://codepen.io/itsalimanuel/pen/gOopGeJ?editors=1010

Hello There, I got a problem with my animation when I use the scrollTrigger for the second element. Also , I can't see the markers! any explanation ? Thanks

Hello @PedroZorus , I think it's an CSS issue ,you can fix it by div{ max-width:100% !important; width: 100% !important; } https://codepen.io/itsalimanuel/pen/QWqgeGY Cheers

Hello @JJulien , hope this help you https://codepen.io/itsalimanuel/pen/276d9e148fa0a763570eaf298dbc7360

Hello @GRVTY , I can't see your example (code) , check the codepen link pelase.

@Cassie It's okay, thanks