Search the Community

I am new to frontend and have started using gsap for animations. I use gsap mainly for switching between sections. On screens larger than 576px I have a problem: when switching between sections there are jumps and they disappear after a while if you scroll up and down the page. Maybe someone has encountered this ? I don't seem to have a lot of animations so far, but already so laggy. Here's what I tried to do: 1. Remove all possible negative margins. 2. Add to all elements to which the transition is made, properties: transform: translate3d(0,0,0,); will-change: transform; backface-visibility: hidden; 3. Set property ease - sine, power1, power2. All this had no effect. In the mobile version I have a lot of animation that works perfectly with gsap.

Hi everyone, I’m encountering the following error when deploying my project on Netlify: Invalid property scrollTrigger set to {trigger: section#vertical, start: 'top top', end: 'bottom center', scrub: true}. This works perfectly fine in my local environment, but the error appears on Netlify. Here is what I’ve tried so far: I made sure to register the plugin using gsap.registerPlugin(ScrollTrigger), but the issue persists. I double-checked that all the DOM elements (#vertical and .col_left) exist before initializing ScrollTrigger. I tested the values passed to scrollTrigger using console.log, and they seem correct. Here’s a simplified example of my code: import React, { useEffect } from "react"; import "../styles/SecondScreen1.css"; import { gsap } from "gsap"; import { ScrollTrigger } from "gsap/ScrollTrigger"; import orange from "../assets/images/Orange.webp"; import mapnazava from "../assets/images/Mpanazava.webp"; import gate from "../assets/images/Gate.webp"; import Lenis from "@studio-freight/lenis"; gsap.registerPlugin(ScrollTrigger); const SecondScreen1 = () => { useEffect(() => { const lenis = new Lenis({ duration: 1.2, easing: (t) => Math.min(1, 1.001 - Math.pow(2, -10 * t)), }); function raf(time) { lenis.raf(time); ScrollTrigger.update(); requestAnimationFrame(raf); } requestAnimationFrame(raf); const section1 = document.getElementById("vertical"); const colLeft = document.querySelector(".col_left"); // Gestion responsive avec matchMedia const mm = gsap.matchMedia(); mm.add("(max-width: 449px)", () => { gsap.fromTo( colLeft, { y: 0 }, { y: "90vh", duration: 1, ease: "tick", scrollTrigger: { trigger: section1, start: "top top", end: "bottom center", scrub: true, }, } ); }); mm.add("(min-width: 450px) and (max-width: 950px)", () => { gsap.fromTo( colLeft, { y: 0 }, { y: "115vh", duration: 1, ease: "tick", scrollTrigger: { trigger: section1, start: "top top", end: "bottom center", scrub: true, }, } ); }); mm.add("(min-width: 951px)", () => { gsap.fromTo( colLeft, { y: 0 }, { y: "32vh", duration: 1, ease: "tick", scrollTrigger: { trigger: section1, start: "top top", end: "bottom center", scrub: true, }, } ); }); return () => { ScrollTrigger.getAll().forEach((trigger) => trigger.kill()); mm.revert(); // Supprimer les animations lors du démontage }; }, []); return ( <div className="secondscreen1"> <section id="vertical"> <div className="container"> <div className="vertical__content"> <div className="col col_left"> <h2 className="vertical__heading custom-h2"> <span>Experience</span> <span>That you</span> <span>Can Trust</span> </h2> <h4 className="custom-h4"> MY PROFESSIONAL PATH </h4> <p className="custom-p"> Over my career, I've had the opportunity to consolidate my skills while working with outstanding organizations across various industries. Here are some of the projects and companies I’ve had the pleasure of contributing to. </p> </div> <div className="col col_right"> <div className="vertical__item"> <div className="header-container"> <img src={orange} alt="Logo" className="custom-image" /> <div className="test-xp"> <h3 className="custom-h3">Orange Digital Center</h3> <h3 className="custom-h3">Développeur Mobile et Web</h3> <h3 className="custom-h3 tech"> Flutter - React Js - Node Js </h3> </div> </div> <p> July 2024 - October 2024 ( 4-month internship ) <br /> As part of the Orange Summer Challenge, I created the Mobile application of the SPARE project with Flutter and the website with React Js. </p> </div> <div className="vertical__item"> <div className="header-container"> <img src={mapnazava} alt="Logo" className="custom-image" /> <div className="test-xp"> <h3 className="custom-h3">Mpanazava eto Madagascar</h3> <h3 className="custom-h3"> Développeur d’application Mobile </h3> <h3 className="custom-h3 tech">Flutter- Node Js</h3> </div> </div> <p> February 2024 - June 2024 <br /> Development of a mobile payment application payment form mobile application with Flutter and Node Js with transaction tracking. </p> </div> <div className="vertical__item"> <div className="header-container"> <img src={gate} alt="Logo" className="custom-image" /> <div className="test-xp"> <h3 className="custom-h3">Gate Company Group</h3> <h3 className="custom-h3">Développeur Mobile et Web</h3> <h3 className="custom-h3 tech"> React Native - React Js - Node Js </h3> </div> </div> <p> November 2023 - January 2024 ( 3-months internship ) <br /> Development of GateAfri, GateNews and AfriMuz with React Native. Optimization of the graphical (UI) and technical aspects of the GateAfri and GateNews websites with React Js. </p> </div> </div> </div> </div> </section> </div> ); }; export default SecondScreen1;

The animation plays while I'm on the page for the first time, after I exit and come back - the animation stops playing I tried: timeline put in useRef gsap.context and subsequently revert Manually clear timeline using kill A simple example that also doesn’t work for me: Here is a link to a site where the text with the same problem is https://next-resume-hazel.vercel.app/ Wait for the full animation and intensity approximately, then go back by clicking on the RESUME title and the text will not animate again. (This post was completely translated using google translator, sorry if anything is not clear) import gsap from 'gsap' import { useEffect } from 'react' export function Component() { useEffect(() => { const obj = { n: 0 } // This will only work while I'm on the page for the first time // If I go to /about, or any other page, and go back, // code block below - will stop working and output the object to the console // Although if you look in _gsap the id of the animation is different from the previous one // Also, not only to but also from, timeline and other things stop working // with which you can smoothly change values gsap.to(obj, { n: 1000, duration: 1, onUpdate() { console.log(obj.n) // 0 - 1000 } }) }, []) return <></> }

Hi, I would like to be able to navigate between two scrolling sections. Right now it works, but how can I be sure to always go to the beginning of the section? Also, I want the animation to be instantaneous. Also, there is a weird stutter sometimes once I have navigated to the section. Not sure what is causing that.

When creating a timeline for parallax images on scroll, my images only animate on-by-one rather than all at the same time. This is my code: useLayoutEffect(() => { const ctx = gsap.context(() => { const tl = gsap.timeline({ scrollTrigger: { pin: true, trigger: main.current, start: 'bottom bottom', end: 'bottom top', scrub: 1, markers: true } }); tl.fromTo(parallaxImage1.current, { filter: 'blur(12px)', y: '100%' }, { filter: 'blur(0px)', y: '-100%' }); tl.fromTo(parallaxImage2.current, { filter: 'blur(12px)', y: '100%' }, { filter: 'blur(0px)', y: '-100%' }); tl.fromTo(parallaxImage3.current, { filter: 'blur(12px)', y: '100%' }, { filter: 'blur(0px)', y: '-100%' }); tl.fromTo(parallaxImage4.current, { filter: 'blur(12px)', y: '100%' }, { filter: 'blur(0px)', y: '-100%' }); tl.fromTo(parallaxImage5.current, { filter: 'blur(12px)', y: '100%' }, { filter: 'blur(0px)', y: '-100%' }); tl.fromTo(parallaxImage6.current, { filter: 'blur(12px)', y: '100%' }, { filter: 'blur(0px)', y: '-100%' }); tl.fromTo(parallaxImage7.current, { filter: 'blur(12px)', y: '100%' }, { filter: 'blur(0px)', y: '-100%' }); }, main); return () => ctx.revert(); }, []); What am I doing wrong?

I wrote the following code to change the shape of svg, but this code has a problem. I want the color of #rect to change at the same time every time atr changes. Is it possible to do the same code with another solution? var tl = gsap.timeline({}); //2 tl.to("#Tear", { attr: { d: First } }); //3 tl.set("#rect", { attr: { style: "fill:#FB7185" } }).to("#Tear", { attr: { d: Second } }); //4 tl.set("#rect", { attr: { style: "fill: #38BDF8" } }).to("#Tear", { attr: { d: Third } }); //5 tl.set("#rect", { attr: { style: "fill: #A78BFA" } }).to("#Tear", { attr: { d: Fourth } }); const scroll = ScrollTrigger.create({ trigger: ".J02ig", pin: true, scrub: 0.5, start: "top top", end: "max", animation: tl // onToggle: self => console.log("toggled, isActive:", self.isActive), // onUpdate: self => console.log("direction:", self.direction) }); scroll.scroll();

i think i have to do something similar like this(Looped "scrolling" section) or this this(the red panel animation) to achieve the background effect. i dont know how to implement though can you guys help? check out this video i am talking about this

Hi! I am really loving Green Sock! I have an animation working, but I am wondering if there is a way to animate all elements at the same time in the same timeline, if that makes sense? See my codepen (you may want to view on codepen or resize the codepen window to see it clearly). My goal with this is to have each box fade in and transform/translate/scale all towards the center of the section and then to fade out at the same time. But, I am trying to get them to do this all at once and to come from different directions. I tried chaining .from().from()'s, but this just plays one and then starts another. I tried something like: tl .from(".icons-animated #HumanStars", {translateX: -200, translateY: -200, scale: 0.3, rotation: 90, autoAlpha: 0, ease: "power2"}, ".icons-animated #HumanStars strong", {translateX: -200, translateY: -200, scale: 0.3, rotation: 90, autoAlpha: 0, ease: "power2"}); but this doesn't seem to achieve my goal. Is there a way to animate .from() and chain the animations inside that from? Which methods should I be reading about/what is the syntax for this if it exists? Or am I not approaching this the right way? Thank you so much.

Codepen doesnt work btw dont know why.. Hey guys what i want to do: animate them out of the screen then animate them all 3 at once back. How do i do this? i commented out the .from because it will do that first and then the rest of the code. Why is this? Ty guys

I have animated an element's attribute using TweenMax like this: TweenMax.to($(".element"), 2, { rotation : 180 }); Later on, I need to get the value of the rotation, is it possible? Something like this: TweenMax.getValue($(".element"), "rotation"); // just an example How can I get the value of an attribute animated by TweenMax?

Such as dealing of cards. You are doing a similar animation but each element ends up in a slightly different position. I know I can animate them one by one and delay each one slightly like in the example code below but is there a shorter and more effective/elegant way of doing this? Thanks in advance! .to('.element1', 1, { x: "+=30", ease: Power3.easeInOut }, "frame1+=1") .to('.element2', 1, { x: "+=60", ease: Power3.easeInOut }, "frame1+=1.15") .to('.element3', 1, { x: "+=90", ease: Power3.easeInOut }, "frame1+=1.25")

I'm drawing a large shape using an array of points in a for loop and tweenlite as found at http://www.flashperfection.com/tutorials/Animated-line-drawing-using-TweenLite-in-AS3-22013.html for(var i:uint = 0; i < pointsArray.length; i++){ TweenLite.to(dot2, .05, {x:pointsArray[i].x, y:pointsArray[i].y, delay:i*.05, overwrite:false, onUpdate:updateHandler}); } function updateHandler():void{ lineAnim.graphics.lineTo(dot2.x, dot2.y); lineAnim.graphics.moveTo(dot2.x, dot2.y); } I would like the animation to complete before continuing, but I'm unable to find a way to be notified when the full animation is complete. onComplete does not work as it triggers on the first set of coords. I also tried triggering when i == pointsArray.length but the loop finishes multiple seconds before the animation completes. I would like to avoid using a timer.

THIS THING IS DRIVING ME MAD .. PLEASE HELP ! var w = 25; var timeline = new TimelineMax(); var mc1 = new TweenMax(); var mc2 = new TweenMax(); timeline.add( [ mc1.to($('#selector'), 10, {backgroundColor:'red'}), mc2.to($('#selector'), 2.5,{width: w+"%", onComplete: function(){ timeline.pause() }}) ],0,0); // so currently the animation pauses at 2.5 secs instead of 10 // how do i alter mc2's tween now that it has finished, with it staying in the same timeline // I tried this .. (it doesnt work) timeline.append( mc2.updateTo($('#selector'), 5, { width: "50%", onComplete: function(){ timeline.pause()} }, false) );

Hi, i need a timeline to stop at a certain point. I remember in AS there is something like tweenTo. How can i achieve this in javascript? Thank you Jan