panamera

@OSUblake Thank you!!!! ?

Hello Forum! I have this animation with a ScrollTrigger. After scrolling, some elements are hiding. How can I make the animation run backwards when hovering the mouse over the navigation? So that the user see all the Words? And at leave if the ScrollTrigger is true play it again. Thank you.

Hello everyone, i try animate two different scroll-trigger animations and I don't understand, how to do this working. I am just learning gsap and unfortunately I have not found anything that could help me. Thank you! gsap.registerPlugin(ScrollTrigger); ScrollTrigger.defaults({ markers: true }); let tl = gsap.timeline({ scrollTrigger: { trigger: ".first_section", start: "top center", end: "bottom top", toggleActions: "restart resume resume reverse" } }); tl.to(".first_items", { opacity: 0, y: "25px", stagger: 0.009, duration: 0.1, }); let tl = gsap.timeline({ scrollTrigger: { trigger: ".sec_section", start: "top center", end: "bottom top", toggleActions: "restart resume resume reverse" } }); tl.to(".sec_items", { opacity: 0, y: "25px", stagger: 0.009, duration: 0.5, });

Thank you @PointC But if i scroll fast to the top, the navigation is very fast and the animation is not ready visible. Can i create a second scrollTrigger with a Timeline? I want to use many Triggers for different elements. Best regard

Hello, i have a problem with my animation. If I scroll very fast, many animations are not really visible or it do not work. And i don't know, how to add a second trigger Animation for another .class Can anybody help me to resolve my issue? Thank you

Hello, i have this code to animate many typo elements if the user scroll down and the .video_section is visible on my site. If I scroll very fast, many animations are not really visible. And i don't know, how to add a second trigger Animation for another .class Can anybody help me to resolve my problem? Thank you! gsap.registerPlugin(ScrollTrigger); let tl = gsap.timeline({ scrollTrigger: { delay: 0.5, trigger: ".video_section", start: "top top", end: "bottom bottom", markers: true, toggleActions: "play none none reverse", scrub: 1, defaults: { duration: 1, ease: "power1.inOut" } } }); tl.fromTo( ".class1 span.word_inner:nth-child(6)", { yPercent: "0", opacity: 1 }, { yPercent: "30", opacity: 0 } ); tl.fromTo( ".class1 span.word_inner:nth-child(5)", { yPercent: "0", opacity: 1 }, { yPercent: "30", opacity: 0 } ); tl.fromTo( ".class1 span.word_inner:nth-child(4)", { yPercent: "0", opacity: 1 }, { yPercent: "30", opacity: 0 } ); tl.fromTo( ".class1 span.word_inner:nth-child(2)", { yPercent: "0", opacity: 1 }, { yPercent: "30", opacity: 0 } ); tl.fromTo( ".class2 span.word_inner:nth-child(6)", { yPercent: "0", opacity: 1 }, { yPercent: "30", opacity: 0 } ); tl.fromTo( ".class2 span.word_inner:nth-child(5)", { yPercent: "0", opacity: 1 }, { yPercent: "30", opacity: 0 } ); tl.fromTo( ".class2 span.word_inner:nth-child(3)", { yPercent: "0", opacity: 1 }, { yPercent: "30", opacity: 0 } ); tl.fromTo( ".menu_wrapper p.menu_items:nth-child(1)", { yPercent: "0", opacity: 1 }, { yPercent: "30", opacity: 0 } ); tl.fromTo( ".menu_wrapper p.menu_items:nth-child(2)", { yPercent: "0", opacity: 1 }, { yPercent: "30", opacity: 0 } ); tl.fromTo( ".menu_wrapper p.menu_items:nth-child(3)", { yPercent: "0", opacity: 1 }, { yPercent: "30", opacity: 0 } );

Hello everyone, I would like to recreate this animation. There are 2 banners that move in loop always from left to right. See here: https://ava-digital.ru/ It would be nice that the animation could change depending on the scroll direction. Does anyone have an idea how I can implement this? Thanks