panamera
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Posts posted by panamera
-
-
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 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
Mouseenter and Mouseleave Navigation
in GSAP
Posted
@OSUblake Thank you!!!! 😃