Search the Community

Hello, I'm trying to create a carousel that spins when a button is pressed. I want it to initially ease-into the spinning animation, then spin at a constant speed for an indefinite amount of time (while the code is waiting for a response from the back-end) and lastly ease-out of the animation during a final spin. I tried creating a timeline and adding the 3 animations to it but the middle animation (with it's repeat set to -1) gives me trouble. I haven't found a correct way to go from the second to the third animation. I tried killing the second animation expecting the timeline to proceed to the final animation but that causes the carousel to abruptly stop. So if there was a way to stop the "infinite" animation in a timeline and proceed to run the next animation that would be very helpful. Alternatively a way to repeat the second animation without setting repeat to -1 could also work. Any help is greatly appreciated.

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?

Please help me figure it out. If you scroll to the end of the page and resize the page, the start positions of the timeline are determined incorrectly.

I have a div called fade and span called caption, I want GSAP to change the background color of fade and inner text of caption This code is changing the background color of element fade but it does not do with the element caption gsap.registerPlugin(TextPlugin); const colors = ["black", "#4d0000", "#800000", "#330000"]; let captions=['some text','some text','some text','some text']; const tl = gsap.timeline({ repeat: -1 }); for (let i = 0; i < colors.length; i++) { tl.to(fade, { duration: 0.4, backgroundColor: colors[i] }); tl.fromTo( caption, { text: { value: captions[i] }, opacity: 0 }, { duration: 3.5, opacity: 1 }, "<" ); } why the caption text is not changed although the background color is changed normally ?

I have a useEffect hook which does some animations which goes like this - useEffect(() => { const ctx = gsap.context(() => { const tl = gsap.timeline(); tl.from(".hero-text", { opacity: 0, x: "-5vmin", delay: 1, duration: 1, ease: "expo.out", stagger: 1, }); tl.to( ".hero-text", { letterSpacing: "0.1em", stagger: 0.9, }, "-=2.5" ); }); return () => ctx.revert(); }, []); I have another animation that I want to run after this animation has ended, but if I add it inside the same useEffect hook it'll make the code a bit messy. I can definitely have a completely different useEffect hook and write the animation there but that way I won't be able to use the timeline defined for this animation. Currently I am just using a delay but I feel like that ain't the best way of achieving the result I want. Is there a way I can add an animation to the same timeline while making sure that the code ain't really messy. Can contexts help in this? Having the animations inside useEffect ain't necessary for my purpose so am open to any sort of suggestions that can be implemented in React, or specifically NextJS.

Hi GSAP Forum, I've been looking at GSAP for a while now and I cannot find a general solution to a problem i've been trying to address for some time now. My site needs to comprise of 8 sections, that use the native vertical scroll in the browser. Each of the section has a timeline associated to it, in which, the previous section transitions into the next section. The second requirement is that each timeline can vary in length e.g: section 1 takes 10 seconds to transition into section 2 section 2 takes 8 seconds to transition into section 3 The main caveat is that the user is restricted to only scroll once i.e. one mousewheel move, one keypress down or one drag on the scroll bar, in which they will have to wait until the animation/timeline completes for them to be able to scroll again. Can anyone offer a solution or a pointer to a solution? I'm currently using react and gsap Many Thanks, Chris

So i am trying to animate the cards at the end of the Page by ScrollTrigger. This page also contains a Initial loading animation of the Page getting revealed. My problem is that if i keep the Initial Page load animation then the ScrollTrigger dosen't work properly (As you can see in the demo) and thecards suddenly appears as soon as the end reaches without a proper animation. But if i remove the initial page load animation then the scrollTrigger animation works fine. Any solution why ? Demo link - Demo here

hi, I have a big problem after updating the gsap library from 3.6.1 to current version. In the first case (version 3.6.1) everything work fine, but in the current version is a problem with scroll after firing animation, only the first animation works correctly but the next animations after firing it moves scroll to top (it is big jump ~100vh). On iOS mobile devices, the first and second solution working well and this problem not happend. I prepared two codesandbox, the first is with version 3.6.1 (next 11) and the second with the current version (gsap: 3.11.4, next: 13). I tried update next in my project but problem is the same and next version is not important in this case. If someone want to test it please test on mobile, because in devtools everything is ok. Codesandbox gsap 3.6.1: https://codesandbox.io/s/gsap-3-6-1-47r3qv Live: https://47r3qv.sse.codesandbox.io/ Codesandbox gsap 3.11.4: https://codesandbox.io/s/gsap-3-11-4-6fn5m0 Live: https://6fn5m0.sse.codesandbox.io/

Hi there, I am looking for an opinion on some ScrollTrigger functionality. I am creating a horizontal timeline which I don't want active until a user clicks on a button to make it active - this timeline could have many years and I only want it to work if a user interacts. The issue I am having is creating the ScrollTrigger on click, there is a layout shift (to be expected). There is a starting/intro panel where the button is which is 100vh/100vw and was going to clone this to act as an overlay until the ScrollTrigger has been created to hide the layout shift, but not sure this is a suitable solution. I tried pairing this with enable/disable, but on load the pinSpacing exists which isn't what I want when I need it to be disabled, but also the pin divs gets added/removed too which also causes another layout shift (again to be expected). Now I can go for the panel overlay route to hide the creating/shifting until it's ready, but I was wondering if having my scrollable content in a modal which only appears when the user clicks is a better solution. I see there is a .scroller property which may be handy, but not sure on the best way to use it in a modal for example. Are there any examples of how this can be implemented? Thanks in advance! Jack

Hi GSAP-Community, I hope that someone can help me out. I'm fighting for some hours with a problem. I'm working with multiple timelines that are beeing created by seperate functions that return a timeline. Then I'm adding them into the mastertimeline with the .add method. I want to start the first and the second animation at the same time, but nothing works, I already have read all documentations. These two i would like to start at Position Parameter 0: mainTimeline.add(box1_2(),0); mainTimeline.add(benefit_paragraph(),0); Best regards, David

Hi there, does anyone know how I can bind that slider I createt using dragdealer to a lottie animation? I know that you can bind a timeline to an input like this, but i dont know how to translate to the right frame of a lottie animation. I would really appreciate any help, thanks.

I have an array that changes as the page scrolls in order of svg shapes, I need the first shape to be displayed on page load. Therefore, I entered the first path d manually and statically. When I scroll to the end of the page and then go back to the beginning, it does not display the first page. Therefore, I returned the first shape to the array, but now the first shape is displayed twice in a row, and I want each one to be displayed only once. I read the DOC, but I didn't get anything, maybe I didn't read it correctly for(let i = 0 ; i < heroSlides.length ; i++){ tl.to("#Tear",{ delay: 0.3, duration: 0.5, attr:{d:heroSlides[i].path,}}) .to("#rect",{attr:{style:`fill:${heroSlides[i].fill}`}, delay:0.75, },"-=0.3") .call(changeBoxes, [i],"-=0.4"); } const scroll = ScrollTrigger.create({ trigger: ".module", pin: true, scrub: true, start: 'top top', end: "max", animation: tl, // markers: true, pinReparent: true, fastScrollEnd: false, }); scroll.scroll();

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();

Hello everyone, I'm trying to make a timeline here, but I don't know how to use the horizontal scrolltrigger. I also want the images to parallax horizontally, and I want them to go left and right as the scroll moves. Finally, I want to give the opacity active value of 1 for the circles with low opacity in each pass. Thank you very much Example; https://transmissions.cristobalbalenciagamuseoa.com/2019-21/maissane-zinai.html

Hey! I have a custom timeline UI (similar to the timeline in adobe after effects) where you can set keyframes for different properties like position, opacity, scale etc. I want to save those keyframes in a format like this { time: 1, value: { x: 100, y: 0 }} for the position and add them to the timeline animation. `time` is the position in the timeline where the element should have the x and y in `value`. I just can't figure out how I would set up the code without any additional calculations for the duration. Currently I have a timeline which should be always 3 seconds long and keyframes should be added to that timeline. This code just doesn't feel correct in my opinion because I would need to set the duration manually for each keyframe by checking if there is a keyframe before the current one and then using that time to calculate the duration. const timeline = gsap.timeline({ repeat: -1, duration: 3, paused: true, onUpdate: () => { // update UI } }) const prop = { x: 0, y: 0 } timeline.add( gsap.to(prop, { keyframes: [ { x: 100, y: 100, duration: 1 }, { x: 0, y: 0, duration: 1 } ] }) ) I hope it's understandable because I don't know how I should explain it well. Sorry for that! Can you please give me a hint how I would do this with gsap? I appreciate any help and advice! For reference: I want to "translate" a view like this into "gsap code".

Hi there, I'm new to gsap and have been following the docs but I'm struggling with the scrollTrigger function. The timeline function to animate '.industry-card' works fine but the animation is happening prior to reaching the trigger '.industries-section' Would love some assistance TIA https://codesandbox.io/s/scrolltrigger-struggle-7qtcms

Hi, I tried to use a timeline with scrollTrigger and it worked well. const sections = gsap.utils.toArray('.item2'); gsap.timeline({ scrollTrigger: { trigger: '.wrapper', start: 'center center', pin: true, srub: 1 } }) .to('.item1', { top: 50 }) .to(sections, { x: 50 }) The problem is that there is four items in *sections* which will cause a fast scroll speed on them and makes it look awkward because of the *scrub 1* and I wanted to use *scrub 4* on them. So I changed the code to this. gsap.timeline() .to('.item1', { top: 50, scrollTrigger: { trigger: '.wrapper', scrub: 1, pin: true, start: 'center center' } }) .to(sections, { x: 50, scrollTrigger: { trigger: '.wrapper', // I want to use a custom scrub here scrub: 4, pin: true, start: 'center center' } }) But then another problem occurred which caused the timeline not to be working properly. How do I set a custom scrub on an element without blowing the timeline?

Hi, I'm having a difficult time with this animation. I have a logo which is going to animate from the bottom then the letters of the logo are going to be reveal from right to left at the same time that it push the logo so everything stays centered. I have and example but it looks like the animation is starting from the center, and not from right to left. I tried to use a background image instead of the SVG and seems to work fine, the issue is that later on I need to change the logo color, so using background image is not an option. Any help would be appreciated. Here is an example of the animation I'm trying to do Screen Recording 2022-07-05 at 15.20.17.mov

Hello, I'm trying to create the sketch shown in the demo with a very simple timeline that is activated on a button click and then reverses. The reverse command does nothing as far as I can see. I tried to do the same thing here without any buttons, but reverse also does not work here https://codepen.io/louise-temple/pen/GRxJXPW What am I missing?

Hello everyone, Hope you are fine, sorry for my english. My animation must be played twice time when the page is loaded. I have this animation code but it no longuer work: const logo = document.querySelector('.logo'); const visual = document.querySelector('.visual'); const wording = document.querySelector(".wording"); const sequence = document.querySelectorAll(".sequence"); const tlAnim = gsap.timeline(); tlAnim .add(() => { wording.classList.add('hide'); logo.classList.add('hide'); }) // Visual .from(visual, { x:-500, duration:.3, opacity:0, delay:.5 }) .to(visual, { x:-350, duration:.3, opacity:0, delay:4 }) .add(() => { visual.classList.add('hide'); logo.classList.remove('hide'); logo.classList.add('show'); wording.classList.remove('hide'); wording.classList.add('show'); }) // Shop Informations .from(sequence, { opacity:0, duration:.3, stagger:.2 }) .to(sequence, { opacity:0, duration:.3, stagger:-0.2, delay:4 }) tlAnim.restart(); I hope to find some help Best regards Adel

I wanted that after the page is loaded the entire content of the page appeared, but when i added spawning animations on the ".hamburger" the rotation animation does not work then, but but as I remove reappearance animations it all works. How do i have rotation and appearance animations? I don't understand why keyframes don't work the line of code that causes the element to appear, when it is deleted, rotation will work .from('.hamburger', 0.3, {x:-100,})

Hi folks! I have a parent timeline consisting multiple child timelines with various durations and tweens. I create the parent timeline empty and paused, then add child timelines in a for loop, adding pause at the end of each. I use onStart and onUpdate methods to check the child timeline progress and update the progress bar styling on DOM, along other things. First run is working as intended, but when I use parent.restart() or parent.seek("childLabel").play(), the onUpdate of the next child timeline fires at the end of current child timeline. Behavior can be seen on console as well. Any ideas why?

I've reached my witts end here, I have been trying to solve this issue for the past hour or so but with no avail. I created an animation with GSAP that creates an illusion that you are zooming into a planet, then the planet will disappear and a random image of a lake with large rocks will appear and two text boxes appear, one of them with a button. Once you click on the button, the image of the lake and the two text boxes will disappear and another image of the night sky will take its place. Everything works well up to this point, however, when I resize the viewport, the image of the night sky disappears and the image of the large rocks appears again when it shouldn't. I've included the CODEPEN for this but I can't recreate the bug/error. gsap.timeline({ scrollTrigger: { trigger: ".earth_container", start: "-20% 0%", markers: false } }) .to(".earth_planet", { width: "+=2500", height:"+=2500", duration: 3 }) .set(".earth_container", { backgroundImage: "url('https://i.postimg.cc/Dy9ryPpB/earth-forest.jpg')", backgroundSize: "cover" }) .to(".earth_planet", { opacity: 0 }) .from(".text_info_box_earth_one", { opacity: 0 }) .from(".text_info_box_earth_two", { opacity: 0 }); the timeline above executes automatically and the code below is only executed when the user clicks on the button "Night Time". As i stated before, everything works fine to this point, but once i resize the window AFTER i click on the "Night Time" button, however, the backgroundImage of the ".earth_container" reverts back to the image of the lake, when it shouldn't... why do you think this is happening? function change_to_night_earth() { let newHTML = "The night sky is just as beautiful " + "as the the day time sky. Millions of stars in every " + "corner of the sky. There may be less light, but there isn't " + "less beauty at this time of the planet"; let new_HTML = "Click the button below if you want to return to " + "the day time of earth..." + "<br><br>" + "<button type='button' class='btn'> Day Time </button>"; gsap.timeline() .to(".text_info_box_earth_one", { opacity: 0 }) .to(".text_info_box_earth_two", { opacity: 0 }) .to(".earth_container", { opacity: 0 }) .set(".text_info_box_earth_one", { innerHTML: newHTML, attr: {class: "text_containers_white text_info_box_earth_one transitioning_fast"} }) .set(".text_info_box_earth_two", { innerHTML: new_HTML, attr: {class: "text_containers_white text_info_box_earth_two transitioning_fast"} }) //-----this is propbably where the error happens---------------------------------------------- .set(".earth_container", { backgroundImage: "url('https://i.postimg.cc/x8km9XKw/earth-night.jpg')", }) //---------------------------------------------------------------------------------------------- .to(".earth_container", { opacity: 1 }) .to(".text_info_box_earth_one", { opacity: 1 }) .to(".text_info_box_earth_two", { opacity: 1 }) }

Hi there! Just working on something for a calming app. I want the user to be able to choose how many breaths they'd like to take, then be walked through an animation that symbolizes each breath. After the animation is finished it should fade off the screen and go back to the section where they can choose how many breaths they'd like to take, starting the page over again essentially. The button that the user clicks is the value that my breatheAnimation will use to repeat. Right now I'm running each timeline separately when the button is clicked, leaving me to need a 4 second delay on my breatheAnimation (not ideal). I was previously attempting to do some kind of onComplete(), isActive stuff, buuut I didn't really know how to go about it with each timeline. Nesting the animations in functions also proved tricky as I wasn't able to use my updated breatheSelect value, it only took the 0 that the breatheSelect value is upon page load. Right now I have the animationRestart timeline commented out as it will simply run as soon as the button is clicked, even when it does run I can't actually start all of the animations again by clicking one of my options. I'm assuming this means I need to reset my timelines back to paused, but I'm not really sure. Thankful for the help in advance! Hope I've provided enough details.