Али К

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

Hello @Cassie , nothing in the console , also the website works with gsap nroamlly ,i made a lot of animation in the same website via gsap.

at last of the page , the code works without scrolling ,here is the problem

Hello guys , as you see in the video the animation not working locally , any explanation gsap.mp4

Hello @Amir-A-M , just add data-scroll-container to your div at top <div class="smooth-scroll" data-scroll-container>

Hello @daniushambalisapija , you can do it with GSAP or with PixiJS too. https://tympanus.net/Development/LiquidDistortion/

Like that ? tl.to("#green", 1, {x:750},"+=2") .add("blueGreenSpin", "-=1") .to("#blue", 1, {x:750, rotation:360},"-=2") .to("#orange", 2, {x:750, rotation:360},"-=1");

You can do it like that https://codepen.io/itsalimanuel/pen/17f5ec8b40f835f2abf9dcf531a13d60?editors=1111

Hello @Brian-afk , Can you add a minimal demo ?

Hello @Brian-afk , welcome to greensock , here an example for the animation https://codepen.io/itsalimanuel/pen/3ca556a8fa6b42ecbb6b181a011348aa

Hello @Stacie , I think you should use .scrollerProxy() also you can check this topic :