Search the Community

Hello GSAP community, I hope this message finds you well. I'm currently working on implementing an infinite marquee animation using GSAP. I would greatly appreciate any insights or suggestions you might have to optimize this code and make the animation smoother. Perhaps there's a better approach or specific settings I should be using? I'm particularly concerned about performance on less powerful devices and would like to ensure a consistent experience for all users. Thank you in advance for your time and expertise. Your input would be invaluable in helping me improve this animation and learn more about efficient GSAP practices. Looking forward to your guidance and suggestions.

I'm trying to loop through an array of elements (it could be images or paragraphs) and create the same tween for each one of them. But i wanna do it the right way (the efficient, readable and clean way) In this article (https://css-tricks.com/tips-for-writing-animation-code-efficiently/) the author does some loops examples in tip #7 but he doesn't add all the tweens in a single timeline… So, i’m wondering if this is the way to do it? function createTween(element) { return gsap.from(element,{ //animations }) } function createTimeline() { const images = document.querySelectorAll("img"); const tl = gsap.timeline(); [...images].forEach(element => { tl.add(createTween(element)) }) return tl; } createTimeline() thanks in advance

//old way tl.add([ //single hop TweenMax.fromTo("#tail1", 0.25, {rotation: 24},{rotation: -24, ease: Power1.easeInOut}), TweenMax.to("#tail1", 0.1, {rotation: 0, ease: Power1.easeIn}), TweenMax.to("#tail1", 0.4, {rotation: 24, ease: Power3.easeOut}), ],0, "sequence"); //new way tl.add([ //single hop gsap.fromTo("#tail1", 0.25, {rotation: 24},{rotation: -24, ease: "power1.inOut"}), gsap.to("#tail1", 0.1, {rotation: 0, ease: "power1.in", delay: .25}), gsap.to("#tail1", 0.4, {rotation: 24, ease: "power3.out", delay: .35}), ],0); Hi! This is my first ever post in the forums, but I've gotten so much valuable information from here over the past several years, so first and foremost, this community has my great appreciation. After over a year having not directly touched banner/GSAP animation, I recently dove back in and saw some amazing new things had happened with the new GSAP. But then I saw something I was quite sad about...like, it surprised me just how sad haha. One of my favorite ways to break out smaller pieces of complex animations was with the method under "//old way" in the code snippet (the codepen is just an example of one such complex animation where these tween arrays were extremely helpful). It was a beautiful thing to animate freely with any combination of 'from, to, fromTo, and set' then slap a "sequence" after the position parameter and know that the whole little sequence could then be moved around on the timeline without the need for further nesting timelines or doing a bunch of math for delay values. You could even add negative delays to get some overlap if desired—it was slick! Under "//new way," durations of tweens get added for the delay value of the next tween. It works the same way as "sequence" did, but it's more work, and animating becomes a pain as you're dialing it in because you have more things to change. Is there any hope for the "sequence" method on tween arrays to make a comeback? It's also very likely that I'm not versed enough in the new GSAP to know there's something better, faster, and stronger than my beloved "sequence". I am aware of the new keyframes method, which seems super cool, but as far as I know, not as cool for two reasons: you can't combine "from/fromTo/to" within the keyframe sequence, and you can't mix targets within the keyframes. That makes sense when you think of them strictly as keyframes, but I miss the flexibility. Have I missed something with the keyframes method? Or is there some other new method that I should explore? I appreciate any thought toward this, and I'm curious to know if I'm alone or if anyone else feels like something has been lost here.

Hi, Please scroll down and then up, in CodePen Pin. When I start scrolling down, animation works perfectly. If I scroll up, animation works reverse but the box does not keep original size and position. How can I fix that? Thanks!

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.

Hi! Here is my issue. I have an animation with a TimelineLite. This TimelineLite contains others nested timelines. Basically the main one is just tl.add(t1).add(t2).add(t3).add(t4).add(t5); So here is my problem now. I want to play either of theses timelines through a global one. Depending of the button click, I'll add one of theses timelines. ... master.add(tl); master.add(t1); master.add(t2); At the beginning, when I play the master with main one, it works well and the WHOLE animations is played, as soon as I play one of the nested timeline alone, and I play the master one again, the nested ones I played are removed and don't occurs in the whole animation anymore. Just to remind you: tl: main tX: nested timelines master: timeline containing either of the timelines above I assume as soon as you add a timeline into another one, the reference to this one into the main one is removed, is it right? How to deal with that? Thanks! Codepen here: https://codepen.io/anon/pen/NzWqpy

Hi, Just a neat little thing I discovered today, when using a calaculation in JS with the a possible output of 'NaN' you can prevent errors like this: var newWidth = value1*value2; TweenMax.set(element,{ width:newWidth || 0 }); Hope this helps someone out, regards, Ivo

Hi All, I've created a fish eye scaling effect but it uses lots of individual tweens, it seems VERY redundant. I tried creating a timeline but it didn't work at all Would a timeline approach for this work, given I need the instance of the object being hovered?

I'm trying to disable all animations in mobile viewport. I'm using enquire to detect and init animations depending on screen size. And Scrollmagic for scroll based animations. I disabled scrollmagic controller in mobile viewport. All scenarios work perfectly except one. In the event where the user starts from a deskstop and resizes to a mobile viewport, the element doesn't get trigger since properities are already applied. For example, an element has autoAlpha: 0, then in mobile viewports -> controller gets disabled -> autoAlpha is still applied and doesn't run. This is intended behaviour but is there a clear all properties for all tweens? Currently, I'm using one of these two methods. First method I put transform: none !important or opacity in css using mobile media query, depending on what tween properties I'm using. Second method I use $('*[style]').removeAttr('style'); to get all elements with style attribute and remove the inline styles. I'm just curious if this is advisable? Both works, but just thinking if there's a better approach that I'm unaware of.

Hi, I created a simple roll-over effect for multiple elements on a webpage: portfolioVak1 = $("#portfolio-vak1"); // Rollover Tweens portfolio portfolioTween.to('#portfolio-titel1', 0.3, {y: "-=20px", delay: 0.1}).to('#portfolio-bekijk1', 0.3, {y: "-=43px", delay: 0.1}, '-=0.3'); portfolioVak1.mouseenter(function(){ portfolioTween.play(); }); portfolioVak1.mouseleave(function(){ portfolioTween.reverse(); }); This works perfectly! But now I want this exact same effect to happen on 30 elements on the same page. Off course, the most clean way to do this would be to create a loop, but unfortunately I don't have the knowledge to make a loop happen in this situation. So the code needs to work on 'portfolioVak2', 'portfolioVak3' ...... 'portfolioVak30'. The tweened elements will also change: '#portfolio-titel2', '#portfolio-titel3' etc. and '#portfolio-bekijk2', '#portfolio-bekijk3' etc. Thanks for your help, Roelof

Have faced that need to work with a multiple "from" tweens with a same element. Of course that gave me a wrong experience with using such a "structure", like: tl.from(Intro_logo, .5, {opacity: 0}) //bla bla other tweens tl.to(the.Intro_logo, 0.25, {opacity: 0}, 'second_frame_start') //bla bla other tweens tl.set([Copy, Intro_logo], {className:"+=next-step"}) //bla bla other tweens tl.from(Intro_logo, 0.75, {opacity: 0, x: '-30%'}) will give me the result that my Intro_logo will have on the very beginning of the animation the positioning of x: -30% (as example). How can I figure it out? Because, with my current job I will have to challenge it always. Thanks in advance!

I am looking for capturing objects position from canvas. Here is an example http://cssanimate.com/ Is it possible to update object position from canvas to code?

Hi I posted on the forum a few days ago with a problem about synchronizing audio/ video with animation and scrub bars. That issue has been solved and the codepen is here: http://codepen.io/dipscom/pen/rryZaQ Thanks a lot for that, it was a great help. Now I am trying to place my tweens on a timeline at exact points and it isn't working correctly. I have audio, animation and scrub bars all synchronized and working correctly but I want to put tweens at specific points in the timeline so the animation matches the music or narration correctly. I have tried absolute positioning and labels but without success and I was hoping someone could help me with this. The codepen is here: http://codepen.io/anon/pen/RGgJrA In this codepen for example I want the first tween to start at 1 second and the second tween at 2 seconds. Why isn't this working? Many thanks Pebble

Hello, I have a question about triggering tweens with the ScrollMagic plugin I created a ScrollMagic page where I animated with CSS, but I prefer to do transform ect with GreenSock. The problem is that when I want to trigger tweens, it doesn't work. This is the code: http://codepen.io/codesen/pen/LRLEYZ I also have a WORKING code, but this is with CSS animation, and not what I want: http://codepen.io/codesen/pen/RGpyGz I used this as an example: http://scrollmagic.io/examples/basic/simple_tweening.html I think the problem is in line 10: .setTween("#project01", 0.5, {backgroundColor: "green"}) I hope you can help!

Hi, normaly I am adding Tweens to my Timeline with TimelineMax.add(). Is there any diffrence (performance etc.) between TimelineMax.to() and TimelineMax.add(TweenMax.to()) ? Or is it just the same?

I'm trying to create a rudimentary slideshow prototype that plays html container slides, loading their matching gsap animation definitions - on a temporary timeline on the fly, playing it, and then removing it (hide method, l326). The pen has two slides, when you play forward/backwards, the animation plays as expected - as the same timeline animations/properties are played back/forwards on navigation. But when you press the "jump to 1st" button on the second slide (which disrupts the linearity by playing "in" instead of reverse out) tween values that are not changed from 1 between the two timelines (the blue and red box's scale) remain unchanged (0.65, from the "out" animation). How is this possible? If you look at the above method, the timeline is invalidated, the element properties cleared... how was the 0.65 scale from the "out" animation retained? (sorry for the complex example code, had to chop down a larger code, I hope the above description is clear enough)

There are often times where I'd like to alternate each line of text flying in. Or different objects flying in from different sides. Most of the time I have to get a list of the objects that I want to tween and then alternate the properties each time. Is there anything like that built into TweenMax? If not, it might be a pretty easy thing to add... I do these animations a lot. I wonder if others do to?

Hey, GSAP forum. Over the past few months I've been having a blast getting to grips with GSAP, as I've transitioned my entire workflow from CSS3 to GSAP. It's had its challenges, but nobody could say this site doesn't provide enough resources to get up to speed with the library, so thanks to everyone on the team for all the great work that's done here. So my problem likely betrays a gap in my general javascript knowledge as much as anything else, but it is however intricately linked to something I want to do with GSAP. Basically I want to tween a group of elements to the value contained in their relevant data- attributes. I've put together a simple code pen to show what I'm after as you can see in the foot of this post. So it should be pretty self explanatory. I click the start button and the tweens should grow to the percentage value contained in data-width and the pixel value of data-height. I've been able to set tweens with fixed variables in the past, but this goes beyond me right now. Thanks for any and all assistance.

Hi I am new to the forum so please forward me advice on posting if this is done incorrectly. I am using supercrollorama to animate a scroll down animation. my Questions for the forum 1) What do the different Power setting mean? i.e is Power0 slower than Power4 2) I need to slow my tween down so that it comes in as more timed tween per say so if I scroll my mousedown the animation does not shoot in it is more gradual. My code is below for the individual elements: var controller = $.superscrollorama(); controller.addTween('#third-third', TweenMax.from( $('#third-third'), 2, {css:{left: "2200px"}, delay: 0.5, ease: Quint.easeIn}), 200); You help is greatly appreciated. Jason

I'm trying to create a system of spawns for an as3 game. The goal is to have my enemy tweens spawn from one of the 4 different spawn points defined in the array of new Points, randomly. I've successful debugged my process so far, as the code at the very bottom illustrates. However, the problem comes when I attempt to enter my random spawn call into the starting point of the greensock tween. The code below shows if the random spawn call starts at the x value, that is to say: {startAt:{x:myArray[random]}, the problem here is that when myArray[random] is called in that manner it's going to return both an x and a y value which of course is not going to work b/c both points are put into the x value of the tween, and separating the x and y values into two different arrays will call random x and y values, voiding my original intent of them spawning from a static point randomly. That being said, I'm asking if there is a way that I could combine both an x and y value in one place so, in theory the tween I'm looking for might look like this: myTween = TweenMax.to(mc, 3, {startAt:{myArray[random]}, x:end.x, y:end.y}); *notice how I want the starting point to be the randomly picked point in the array. * here is the idea put into action, but notice starting point below is { x:myArray[random] } var spawnPoint_Array:Array = [new Point(270, 808), //////// X and Y value of SPAWN 1 new Point(-81, 768), //////// X and Y value of SPAWN 2 new Point(1024, 768), //////// X and Y value of SPAWN 3 new Point(566, 809)] //////// X and Y value of SPAWN 4 var random = Math.round(spawnPoint_Array.length * Math.random()); //////picks a random spawn point myTween = TweenMax.to(mc, 3, {startAt:{x:myArray[random]}, x:end.x, y:end.y}); *in the above tween, mc just refers to the movieclip name Any ideas on how I would fix this problem?

Using SoundManager2 library, my sound has already been created. I want to call the play function once my timeline reaches the correct point. Any ideas how I can do this? Thanks in advance. tl.set("#mod5", {visibility:"visible"}, "#mod5") // call soundManager --> soundManager.play('mod5') .staggerFrom("#e5", 0.5, {autoAlpha:0, x:180}) .to("#e6", 0.5, {delay:1});

I have a project where most of the tweens last exactly 0.15 seconds. It may seem like an odd number, but it's what feels most pleasing to the eye for this project. My question is: is it more efficient to specify the tween duration in frames or in seconds? I assumed frames would be the most efficient, so I converted my code to be all frame based. I set the project at 27fps and have the animations set at 4 frames, which isn't exactly 0.15 seconds, but is pretty close. But I would like things to look just a hair smoother. To get up to the next number that divides evenly by 0.15, I would need to up the framerate to 40, which gives us an even 6 frames per animation. This makes me worry that the frame rate may be too high for less powerful computers, though. I could avoid all of this by simply using seconds instead of frames, which brings me back to the original question. tl;dr: Is it more efficient to specify the tween duration in frames or in seconds?

Hi, I've previously used pauseAll and resumeAll when entering a pause state of a game to halt animation. With the GSAP JS pauseAll works fine, but resumeAll doesn't resume any of the animations that we're paused, I notice the docs suggest both methods are deprecated. Are there any other suggested solutions short of manually resuming all tweens individually? Thanks Rob

There is a problem with tweens in these conditions(edited): Browser has multiple opened tabs and has worked for about 10-15 min Browser was idle and then used again When I open up more then 3 tabs Code: var tweens = { main_area: { layer_buttons:{ getTween: function (_this, _properties) { return TweenMax.to(_this,0.5, { css: _properties, paused: true, delay: 0.2 }); } } }}var g = tweens.main_area.layer_buttons.getTween;var start = g($(".info", "#information-start"),{opacity: 1});$("#layers").on("mouseenter", "#information-start", function () { start.play(); }).on("mouseleave", "#information-start", function () { start.reverse(); }); Problem:When I do a quick mouseenter from outside of browser or from another or mouseleave, animation doesn't render correctly and I just see end result (without seeing actual animation)Note:I've noticed this behavior only in Chrome so far. I don't know what will be users situation with browser, that's why I want to know is there some kind of workaround for this problem. After completely closing all tabs and restarting chrome browser, all tweens work how they supposed to work. It's not just in this situation, it's with every tween I have on my site.

Hi, I am writing pretty simple game that utilizes MVC pattern. Model is calculating data stored in Array and dispatches events to View that tries to reproduce and visualize it. I wanted to implement View in the way that TimelineMax is handling the tweens by queing it up and play it at the certain point of time. Here is the mainLoop from Model public function mainLoop():void { applyBonus(bonuses); fall(); applyBonus(bonuses); dispatchEvent(new Event(BoardModel.PLAY)); } the function applyBonus or fall just dispatches appropriate events to View. The listeners to this methods just create Tweens and are adding them to the TimelineMax using the append method. The problem is that each on this tweens has a its onComplete method. I want to make sure that not only twees are executed in correct order but also onComplete. Currently I have: applyBonus tween fall tween applyBonus onComplete fall onComplete I wish to have: applyBonus tween applyBonus onComplete fall tween fall onComplete etc. How can I achieve something like this?