Search the Community

Greetings, I'm new at GreenSock ( first project ) and as you may guess, I do have some struggles, I want to group the tweens in the timeline, rather than going individually, first two goes at the same time and then the second two and so on... I really try to figure out by myself, I add a minus delay but it's not working properly with ScrollMagic or I can't make it work. Here is my code: let controllerPerspectiveFirst = new ScrollMagic.Controller(); perspectiveTimeline = new TimelineMax(); perspectiveTimeline .to( '#as-perspective-bg--mountain--01', .4, { autoAlpha: .72, scaleY: .8, scaleX: .8, ease: Power4.easeOut } ) .from( '#as-perspective-bg--mountain--02', .4, { scaleY: 1.4, scaleX: 1.4, autoAlpha: 0, ease: Power4.easeOut } ) .to( '#as-perspective-bg--mountain--01', .4, { autoAlpha: 0, scaleY: 0, scaleX: 0, ease: Power4.easeOut } ) .to( '#as-perspective-bg--mountain--02', .4, { width: '180vw', scaleY: .6, scaleX: .6, ease: Power4.easeOut } ) .from( '#as-perspective-bg--desert', .4, { scaleY: 1.4, scaleX: 1.4, autoAlpha: 0, ease: Power4.easeOut } ); Thanks much.

Demo: https://codesandbox.io/s/n34pvjxyxj Hi, fellow GSAP'ers! The topic of playing a timeline in reverse keeps troubling me. The Demo above is one, where, within Vue, a parent component calls function on a child component (using $refs). As the console output shows, the functions are indeed called, but the animation is not played in reverse. I do not understand why, because: - the timeline is returned to a var, right? - the staggered animations use `staggerFromTo` , even though I assume that using any of the other two should eventually work, too What am I doing wrong here (again)? Do I misunderstand the idea of having the timeline saved to a variable (here: animateLogo)? Are reverse animation on timeline using a stagger feature not possible? (I doubt that! It's GreenSock!) Thanks you in advance! PS: the actual GSAP-related code parts are kept as short as possible. Please ignore the other stuff, which is just there to wrap the letters... (no, I am still not using SplitText... shame on me!)

Hi, I'm trying to playing around with the features of GSAP, but I can't figure out how to work with timelines, I'm new to all this, any help would be appreciated. What I'm trying to do in my code- Each time the v-shaped silver svg translates away from its initial position and back, the text changes, to a different one, similarly it happens once more. Now it works well in the first iteration, but once the animation restarts, the timing gets disturbed, I just can't figure out what I'm doing wrong here, hopefully I was able to explain the issue, thanks in advance and hope you guys have a great day!

Hey there, this is my first time using GSAP. I'd like to play my animation backwards on hover. The only thing I can't figure out jet is how i can make the animation do that in 1 second. Any ideas? If this is not possible it would be also nice if the animation just jumps back to its origin position on hover. In addition to that: Is it possible to start the animation again on mouseout? Best regards Max

What's up good people I am trying to create my own TimeLine which will show the element (red box) at the random positions for 50 times. Moreover, it should change background color to random between red, green, blue everytime before the box shows up. I am not sure how to do it. Should I define TimeLine, stop it, then add there instructions via "for" loop for 50 times and then run the Timeline via play() method? I think i am doing it wrong, maybe it can be done another way...

Hi guys first time asking help here ?, I'm doing some stuff with timelinemax and trying to make animation without make another starting while the first is active, i've discovered the isActive property but even by trying it and reading some other post i didn't get any solution for my method, does anyone can help me thank you if (!tl.isActive()) { tl .add('move') .set(this.$refs.mask, { clearProps: 'all' }) .set(this.$refs.tabs, { clearProps: 'all' }) .set(icons, { clearProps: 'all' }) .set(mask, { x, y, scale, }) .to(this.$refs.picture, 0.8, { x, y, scale, ease: Power4.easeOut, }, 'move') .to(this.$refs.triggers, 0.1, { opacity: 0, ease: Power4.easeOut, }, 'move') .to(mask, 0.3, { autoAlpha: 1, }, 'move+=0.4') .to(tab, 0.3, { backgroundColor: '#F4F0E9', ease: Power4.easeOut, }, 'move+=0.2'); }

I have a group of animation that would be executed one after the other which is perfect to do with timeline and its labels but I also want to add on a single repeating animation that would be playing throughout this whole timeline and would end when the timeline ends. When I added this stand alone animation inside the timeline in the first label, everything else waited for it to finish playing. It still happened even if I put it at the top before the chain animation with labels and without using any labels to calculate the timing. Of course, I can choose not to use labels at all and calculate the time needs to be added in between all the animations manually but that would defeat the purpose of using the timeline in the first place. //want to repeat this sprite throughout the whole timeline timeline.to('.repeating-animation', 1.2, { repeat: 4, //anyway to calculate this automatically so that it stops when the timeline ends instead of giving a fixed value? backgroundPosition: "-10px 0", rotation: 0.01, ease: SteppedEase.config(5) }, "0") //starts at the beginning //followed by chained animation //but everything down below waits for the reapting animation above to be finished before executing .addLabel("label1") .from('.sample', 1, { autoAlpha: 0, ease: Sine.easeOut }, "label1+=0.5") .addLabel("label2") .from('.sample2', 1, { autoAlpha: 0, ease: Sine.easeOut }, "label2+=0.5") .addLabel("label3") .from('.sample3', 1, { autoAlpha: 0, ease: Sine.easeOut }, "label3+=0.5") //and so on I'm wondering - if there is a cleaner proper way to play this repeating animation throughout the timeline. - if there is a way to make the number of times being repeated to be dynamic to total length of the timeline? So, it stops when the timeline ends? Thanks in advance!

Hi all, First of all, thank you for the lovely community and the support given. I have spend many hours going over older topics to figure things out in the past and its been a massive help. I am working on a new project where I want to trigger animations based on a scroll position. I know this has been done many times before and after doing some research I decided that I do not want to use a plugin (like Scrollmagic for example) for performance reasons. On one of the posts here I found out that there is a newish API within JavaScript that can handle my needs called IntersectionObserver, I am using a library to make sure that I have a wide browser support for this technology (https://github.com/russellgoldenberg/scrollama). If you would look at my Codepen, you will notice that I am trying to trigger an animation on the second element based on the scroll position. I am using .progress(); to do so, where I call in a value between 0-1 based on the scroll position (taken from the Scrollama library). When you scroll down, you will notice that the box on the left moves position (as intended). The problem I am having though, is when you scroll up it does not move back. I am assuming that when using the .progress(); function, the timeline will be animated to whatever position is being fed into this? Unfortunately I can not get this to work. I have been searching on the internet for hours now and I just can't seem to find the issue. Hopefully this explains my problem clear enough, thank you in advance for any help!

Hi, I was looking for animation on scrolling and i came across this So I played with it a little. I used scrollmagic to pin the layout during the duratoin of the box animation. So now i want to create similar animation timelines, with few changes. How do i put an individual timeline into a function and call it on scroll. Ive tried this syntax, but it doesnt seem to work : jQuery('.Screen').each(function () { var currentScreen = this; new ScrollMagic.Scene({ triggerElement: currentScreen, duration: 2000, offset: iScreenSize_H }) .on('start', function () { console.log(this.triggerElement().id); }).addTo(controller); }); Thank you .

I'd like to see if there's a way to load GSAP through JavaScript and then create a timeline after it's loaded and ready. I tried to use fetch + then to achieve this, but I think there's something I'm doing wrong here. fetch('https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TweenMax.min.js') .then(function() { var tl = new TimelineMax({repeat: -1}); tl.to("#square", 1, {x: 300}) .to("#square", 1, {x: 0}) ; }); Th error I'm receiving: Uncaught (in promise) ReferenceError: TimelineMax is not defined I'm not sure if this is just a JavaScript error or an error with how GSAP needs to be loaded.

Hi all, I'm trying to recreate a feature of this timeline slider. However, my timeline is configured differently, so I'm having difficulty translating the js over. Basically, I want my slider to change from white to red as the timeline slider progresses. Here's my current setup: https://jsfiddle.net/rymatt94/w9tf2bzw/40/ Apologies if this is overly simplistic - I'm new to javascript/jQuery and GSAP! Thanks in advance.

Hey, I am desperately searching for a way to play one step of my timeline when the a mouse scroll gets started. All methods that I have found trigger the events multiple times on scroll and gsap gets really confused. Is there a convient way to build something like that with greensock? What I want to build is a animation triggered webapp like these: https://theshift.tokyo/ http://www.contiducco.it/index.php?route=common/home My Code at the moment: $(window).bind("mousewheel DOMMouseScroll", function(event) { var docTimeline = new TimelineLite({ paused: true }); docTimeline.add(TweenLite.to(".lightLogo", 1, { y: "200%" })); docTimeline.add(TweenLite.to(".text", 1, { x: "0%" })); // Events when scrolled down. if ( event.originalEvent.wheelDelta < 0 || event.originalEvent.detail > 0 ) { docTimeline.play(); } else { docTimeline.reverse(); } });

Hi Everyone! I am working on an audio player that is controlled by a draggable element using GSAP. The audio and timeline animation work fine if the user pauses the clip before dragging the element, but if the user tries to drag the element while the audio is still playing the timeline breaks and returns a timeline.time() = 0 no matter what I try to pass into it. Any help would be greatly appreciated! Thanks!

I want to extend the time of the timeline exactly in the current item, but without pausing, just extend the total duration. When I use myTimeline.totalDuration ( myTimeline.totalDuration () + 10 ) not works. The timeline continues with the current duration... My example code: trace(myTimeline.totalDuration()); //20 myTimeline.totalDuration( myTimeline.totalDuration() + 10 ); trace(myTimeline.totalDuration()); //20 //the final result should be 30... not?

Hi community! I'm first time playing around with GSAP and I love it. I tried to build a little demo where a bee is flying. The clouds are moving but If I use no timeline the delayed clouds (cloud 3 & 4) are moving too fast. Any Idea how I can fix that? I tried to use a timeline but it is not working. I think because the first element (#bee) has an infinite repeat (-1) so its not starting the second tween. Is there a way to start the tweens in a timeline manually? I didnt understand the docs and couldn't find it. Thank you!

Problem I'm noticing some very strange behavior when I'm updating a timeline's children tween durations. This is problematic for instances where I need to set the duration of the tween after initialization. e.g. an audio clip needs to download before knowing what the desired duration is. Observations The codepen demonstrates this. I construct 10 tweens at 0.2 duration each to a timeline (2s total). When I update each of the tweens' durations to 0.4, several unexpected things are observed: 1. Parent timeline only goes to 2.2 2. The tweens become "choppy" with overlap. It appears that only the last tween expands the timeline, but an interval of 0.2 is still placed between each tween. How can I correct this after updating the duration? Thanks!

Hey guys Sorry for the very basic question, but i'm running an animation linked in the codepen (very simple state at the moment) and there's 2 parts that i'd like to loop while other animations in the timeline play, to be stopped at a later point. For example, if I added .to("#anim-loadingdot", 1, {repeat:-1, yoyo:true, bezier:{values:MorphSVGPlugin.pathDataToBezier("#anim-loadingpath", {align:"#anim-loadingdot"}), type:"cubic"},ease:Linear.easeNone}) the timeline would wait infinitely for it to finish before continuing. Is it possible to set this to run "infinitely" at a certain point, and then come back to stop it later? Thanks in advance and sorry for the basic question.

I've created an animated landing page for my portfolio using GSAP and ScrollMagic.js, but it's pretty resource intensive and I know my code isn't the most efficient. How can I modify the code to create a smoother and more robust animation? And how can my JavaScript be condensed and more efficiently written to avoid repetition? function pageScroll(e) { var clicked = e.currentTarget.id; if (clicked == "navWelcome") { TweenMax.to($('#mainNav'), 0.4, {x:windowWidth}); TweenMax.to(window, 0.8, {scrollTo:{y:"header"}, delay:0.3}); }else if (clicked == "arrow") { TweenMax.to(window, 3.5, {scrollTo:{y:"#aboutMeFull"}}); }else if (clicked == "navAbout") { TweenMax.to($('#mainNav'), 0.4, {x:windowWidth}); TweenMax.to(window, 0.8, {scrollTo:{y:"#aboutMeFull"}, delay:0.3}); }else if (clicked == "navServices") { TweenMax.to($('#mainNav'), 0.4, {x:windowWidth}); TweenMax.to(window, 0.8, {scrollTo:{y:"#servicesConBg"}, delay:0.4}); }else if (clicked == "navPortfolio") { TweenMax.to($('#mainNav'), 0.4, {x:windowWidth}); TweenMax.to(window, 0.8, {scrollTo:{y:"#portfolio"}, delay:0.3}); }else if (clicked == "portfolioBut") { TweenMax.to(window, 0.8, {scrollTo:{y:"#portfolio"}}); }else if (clicked == "navContact") { TweenMax.to($('#mainNav'), 0.4, {x:windowWidth}); TweenMax.to(window, 0.8, {scrollTo:{y:"#contact"}, delay:0.3}); } } for (var i=0; i<navBut.length; i++) { navBut[i].addEventListener('click', pageScroll, false); } for (var i=0; i<navItem.length; i++) { navItem[i].addEventListener('click', pageScroll, false); } document.querySelector('#arrow').addEventListener('click', pageScroll, false); //Landing Page $(function() { var xTo = 1.15*window.innerWidth; var yTo = 0.5*window.innerHeight; var rocketTween = new TimelineMax().add([ TweenMax.from("#parallaxContainer #bg", 1, {backgroundPosition:"0 100%", ease: Linear.easeNone}), TweenMax.from("#parallaxContainer #starsSmall", 1, {backgroundPosition:"0 12%", ease: Linear.easeNone}), TweenMax.from("#parallaxContainer #starsLarge", 1, {backgroundPosition:"0 6%", ease: Linear.easeNone}), TweenMax.to("#parallaxContainer #rocket", 1, {y:0, ease: Linear.easeNone}), TweenMax.to("#parallaxContainer #cloudsFront", 1, {y:0, ease: Linear.easeNone}), TweenMax.to("#parallaxContainer #cloudsBack", 1, {y:0, ease: Linear.easeNone}), TweenMax.to("#parallaxContainer #comet", 0.5, {x:-xTo, y:yTo, delay:0.5, ease: Linear.easeNone}), TweenMax.to("#parallaxContainer #logo", 0.8, {opacity:0, ease: Linear.easeNone}), TweenMax.to("#parallaxContainer #arrow", 0.07, {opacity:0}) ]);

Hi! I have two videos on the timeline: After some seconds of the playing of the second video, it calls dispose() of the first one. But the dispose free the memory from the first one so fast that the play of the second video gives a small "bottleneck" in playback at the time of the dispose(). A "bottleneck" of half a second, but ideally it would not "bottleneck" anything and the playback would be 100% fluid. Is there a way of the dispose() free the memory more slowly? Thanks a lot.

I've recently found myself wanting to animate SVGs for a few different projects and realized I realized that I've not done it before. In looking to find a good method of handling different sorts of animations, I found GreenSock and have gone over the docs and some of the learning materials, but I seem to be misunderstanding some basic concept... I saw the face example on the MorphSVG plugin and decided to do my own take on it... I've gotten some of it working, but I'd appreciate it if someone could take a look at my CodePen and tell me what I'm doing wrong when trying to animate between a Smile, Neutral, and Frown face. Thanks

Hi, Is it possible to create a timeline that after playing for the first time, when it repeats it starts from a different point in the timeline? In the example below (CodePen included) I'd like the timeline to play through once from the start, and then after this when the repeat kicks in I'd like it to start from the "start" label. It will basically remove the initial fading in off all the elements after the first play. var tl1 = new TimelineMax({repeat: -1}); tl1 .to(".box", 2, {opacity: 1}) .add("start") // would like animation to start from here when repeating .to("#box-1", 1, {scale: 0, ease:Power0.easeNone}) .to("#box-2", 1, {scale: 0, ease:Power0.easeNone}) .to("#box-3", 1, {scale: 0, ease:Power0.easeNone}) .to("#box-4", 1, {scale: 0, ease:Power0.easeNone}) Many thanks

Hello friends. I ran into a strange issue: if you .addPause() to a timeline that has doesn't have any tweens inside it (only callbacks), the timeline isn't paused. See the example pen. Note that when the pen runs, both 'before pause' and 'after pause' are logged. If you uncomment either of the tweens, addPause works correctly. I know this looks a little silly, but I ran into this issue in production. I'm working on a state transition system where states have an 'enter' and an 'exit' method. The states also have a preload function, which returns a promise. In pseudo code, the transition logic looks like this: const tl = new TimelineLite(); if (currentState) { tl.add(currentState.exit()); tl.add(() => { scene.remove(currentState); }); } if (nextState) { tl.addPause(); tl.add(() => { scene.add(nextState); }); tl.add(nextState.enter()); nextState.preload().then(() => { tl.resume(); // or removePause }); } The goal is to begin preload and exit simultaneously. Then when both are done, the next state is added to the scene and it's enter animation is played. The 'enter' and 'exit' methods return a no-op function (if there is no animation for that state), or a tween (if there is an animation for that state). The issue I have is that if there is no current state (or the current state has no exit animation), AND the next state doesn't have an enter animation, the 'scene.add(nextState);' callback is triggered before the preload is complete. I can work around this in code, but I would expect the 'addPause' to work even without any tweens. Or maybe this is too much of an edge case? EDIT: Actually, it looks like both callbacks in the pen are also triggered if only the 1st tween is uncommented. But if the 2nd (or both) tweens are uncommented, the pause works as expected.

Hello GSAP community, I dug through the forums and tried to find if someone has already had this problem but I wasn't able to find the solution, so I thought I'd ask the community. I'm currently trying to figure out how to pause an element's animation at around 10 seconds into the the animation. I've tried using pause(), kill(), and have added a new function trying to pause the timeline, but I have had no luck. The scene in question is `scene4` in the codepen. Any ideas? Thank you very much for your time, it's greatly appreciated!

I have a timeline animation with an onComplete function. In the timeline I have several overlap tweens, ie. load.to('#preloadLogo', 3,{autoAlpha: 1},"-=2") The "-=2" overlaps are causing the onComplete function to fire with a delay. In the codepen example, it takes several seconds for the heading to load. When the overlaps are removed, my onComplete function fires immediately (which is what I want). How can I make the onComplete fire right away, and still keep my timeline overlaps in tact?

I want the car to move after the bicycle has reached its end. (How to trigger a 2nd scene only after the 1st scene is completed ) Thank you in advance