Search the Community

I have a problem with my current code, it seems to big of a hassle to put in codepen and make it work since it has lots external files so i am only posting the relevant JS code. var tlAddDevices = new TimelineLite(); tlAddDevices.fromTo(desktopHome, devicesTime, {x: -100,y: 100,opacity: 1,display: "block"}, {x: -100,y: 170,opacity: 1,zIndex: -1,},0); tlAddDevices.fromTo(laptopHome, devicesTime, {x: -600,y: 170,opacity: 0,display: "block"}, {x: -420,y: 371,opacity: 1,},0); tlAddDevices.fromTo(tabletHome, devicesTime, {x: -0,y: 170,opacity: 0,display: "block"}, {x: -130,y: 429,opacity: 1,},0); tlAddDevices.fromTo(smartphoneHome, devicesTime, {x: -100,y: 400,opacity: 0,display: "block",zoom: 0.5}, {x: 0,y: 446,opacity: 1,zoom: 1,},0); tlAddDevices.fromTo(bmw1, devicesTime, {x: 0,y: -70,opacity: 1,display: "block",}, {x: 0,y: 0,opacity: 1,},0); var removeDevicesTL = new TimelineMax() removeDevicesTL.to(laptopHome, 2, { opacity: 0, x: 100 },0); removeDevicesTL.to(tabletHome, 1.5, { opacity: 0, x: 100 },1); removeDevicesTL.to(smartphoneHome, 1, { opacity: 0, x: 100 },1.5); var tl3 = new TimelineMax(); var showTextLength = 3; tl3.add("startDekstopSlideshow") .to(bmw2, transitionDuration, { opacity: 1}) .to(bmw3, transitionDuration, { opacity: 1 }) .add("showEIX") .to(iex, transitionDuration, { opacity: 1 }) .add("showWeekendDeals") .to(weekendDeals, transitionDuration, { opacity: 1 }) tl3.add("showDashboard") tl3.to(dashboard, transitionDuration, { opacity: 1 }) .add("end") var tlText = new TimelineMax() .add("Branded-Leads") .to(textSlides[0], transitionDuration, { opacity: 1, y: "+=100" }) .to(textSlides[0], transitionDuration, { opacity: 0, delay: showTextLength, y: "+=100" }) .set(textSlides[0], { y: "-=100" }) tlText.add("Groot-bereik"); tlText.to(textSlides[1], transitionDuration, { opacity: 1, y: "+=100"}) tlText.to(textSlides[1], transitionDuration, { opacity: 0, delay: showTextLength, y: "+=100" }) tlText.set(textSlides[1], { y: "-=100" }) tlText.add("Dashboard"); tlText.to(textSlides[2], transitionDuration, { opacity: 1, y: "+=100"}) tlText.to(textSlides[2], transitionDuration, { opacity: 0, delay: showTextLength, y: "+=100" }) tlText.set(textSlides[2], { y: "-=100" }) tlText.add("Demo"); tlText.to(textSlides[3], transitionDuration, { opacity: 1, y: "+=100" }) //tlText.to(textSlides[3], transitionDuration, { opacity: 0, delay: showTextLength, y: "+=100" }) //tlText.set(textSlides[3], { y: "-=100" }) tlText.add("endText") var mainTimeLine = new TimelineLite() .add(tlAddDevices) .add("set1","+=2") .add(tl3.tweenFromTo("startDekstopSlideshow", "showEIX"),"set1") .add(tlText.tweenFromTo("Branded-leads", "Groot-bereik"),"set1") .add("set2") .add(removeDevicesTL,"set2") .add(tl3.tweenFromTo("showEIX", "showWeekendDeals"),"set2") .add(tlText.tweenFromTo("Groot-bereik", "Dashboard"),"set2") .add("set3") .add(tl3.tweenFromTo("showWeekendDeals", "showDashboard"),"set3") .add(tlText.tweenFromTo("Dashboard", "Demo"),"set3") .add("set4") .add(tl3.tweenFromTo("showDashboard", "end"),"set4") .add(tlText.tweenFromTo("Demo", "endText"),"set4") When i use this code i expected the mainTimeline to play the sets in order but for some reason it seems to start with the last set (set4) and then start properly from set1 all the way to set4 and stop like i expect it to. Maybe i am misunderstanding this. I have all the imgs (iex bmw1 bmw2 etc) opacity set to 0 using css but they instantly appear. I will try later to create a codepen to replicate this but maybe it is possible to see my error via this code? EDIT: Added codepen demo

Hi there, I am trying to create the effect of one shape morph in width from target1 to target2. And then morph back from target2 to target1 using .reverse() However I am unsure why my .reverse() isn't working? Cheers, Venn.

I have the following code: window.onload = function() { var tl = new TimelineMax(); tl.to(document.getElementById("exit-button"), tt, {autoAlpha:1, ease:Power3.easeInOut}) } I'm loading tweenmax from the CDN. And on my localhost everything works as planned, but when I upload to the clients server I think they have some other scripts/ assets that are throwing the window.onload off. What can I do to avoid the error: "Can't find variable: TimelineMax"? HELP?!

Hi there, I am trying to build a project for work that is essentially a map based infographic. This is my first major project using Greensock so i am trying to do things step by step. First step. The icons that will display on the map. I have made these red in my example and was want each to open a box next to them. I was wondering the best way to do this? Of course at the moment when i click one they both open. Is the class best used to style in the css (e.g. .icon) and the id for Greensocks use? Any help is appreciated, Phil

I'm loading my SVG files into different elements on my website. I'm trying to animate it with TimelineMax and it's didn't animated. I think it's because SVGs loaded dynamically and TweenMax didn't see them. How to animate them with TweenMax?

Hello, I'm new user of GSAP, and I try to make a webapp projet, with animation created with GSAP. I have not really problem for create and animate, it's a hard process to know all posibility of this tool but, is not the problem.. My approach is to try to launch SVG animation without hover (obviously in ipad) and without click: - My webapp content section (fullpage.js) like : #section1 : "home" - #section 2 : "my first animation" etc... I see the examples : http://www.publicis90.com/#/publicis90, or that one http://www.cryptarismission.com/ on this site and it's awesome but i dont understand how can i do that.. I want said : When I change section -> my animation start. If i launch my app now.. All animation start in background and when i change #section, animation is ended.. I sorry for my english and my incomprehension :'( Thanks a lot B.

Hi! I am a big fan of the tweenFromTo and tweenTo function of TimelineMax. However, these functions always return a TweenLite instance. Is it in any way possible to make that a TweenMax? I would very much like to have access to repeat and yoyo properties, for example. In other words, something like this would be cool: myTimeline.tweenFromTo ( 'nowhere', 'somewhere', { repeat:-1, yoyo:true } ); (Or, maybe I'm missing something and this is already possible?) myTimeline.tweenFromTo ( 'nowhere', 'somewhere', { repeat:-1, yoyo:true } );

Hi! I have a lot of tweens I want to start and complete at the same time. Is there an easier way to do that than this code?: TweenMax.to('#charmander_path11', 2, {morphSVG:'#charmeleon_path8'}); TweenMax.to('#charmander_path1', 2, {morphSVG:'#charmeleon_path1'}); TweenMax.to('#charmander_path7', 2, {morphSVG:'#charmeleon_path7'}); TweenMax.to('#charmander_path3', 2, {morphSVG:'#charmeleon_path4'}); TweenMax.to('#charmander_path2', 2, {morphSVG:'#charmeleon_path2'}); TweenMax.to('#charmander_path4', 2, {morphSVG:'#charmeleon_path3'}); TweenMax.to('#charmander_path5', 2, {morphSVG:'#charmeleon_path6'}); TweenMax.to('#charmander_path10', 2, {morphSVG:'#charmeleon_path9'}); TweenMax.to('#charmander_path8', 2, {morphSVG:'#charmeleon_path13'}); TweenMax.to('#charmander_path9', 2, {morphSVG:'#charmeleon_path10'}); TweenMax.to('#charmander_path6', 2, {morphSVG:'#charmeleon_path11'}); TweenMax.to('#charmander_path12', 2, {morphSVG:'#charmeleon_path5', fill:'#CBD4DD'}); TweenMax.to('#charmander_path13', 2, {morphSVG:'#charmeleon_path12'}); I know you can make a timeline, but then all the tweens will happen after each other. Also, how would i repeat all those tweens without copying myself? Thanks

Hello everyone, I am currently creating a page that uses the GreenSock animation library to trigger animations as a user scrolls down the page. The interesting kink in this is that I need to swap out timelines I have created for the sake of responsive design (ie the animation graphics change to less complex ones when the page gets smaller.) This is a simplified test case from my actual page, but gets the same point across. The primary issue I am having is with using .pause() and instantiation of a new TimelineMax() that uses the same elements. For example, if I create a timeline with a Tween, and then pause it: var t1 = new TimelineMax(); t1.add(TweenMax.from($('#element1'), 1, { scale: '0.2', autoAlpha: 0, transformOrigin: 'center center', ease: Back.easeOut }), 0); t1.pause(0); // reset to beginning and hold, don't play yet. I can then play the animation back later on using .play() or .restart() and it works fine. However, let's say I never actually play the animation, and then kill this timeline, and attempt to create a new one that attaches to #element1: // so, instead of t1, we want to run t2 instead, so kill t1 t1.kill(); // create t2 instead var t2 = new TimelineMax(); t2.add( TweenMax.from($('#element4'), 2, { x: '-5px', ease: Power2.easeOut }), 0) .add( TweenMax.from($('#element3'), 2, { x: '-10px', ease: Power2.easeOut }), 0) .add( TweenMax.from($('#element2'), 2, { x: '-20px', ease: Power2.easeOut }), 0) .add( // Note element1 is reused here TweenMax.from($('#element1'), 1, { x: '-5px', y: '20px', scale: '0.2', autoAlpha: 0, transformOrigin: 'left bottom', ease: Back.easeOut }), 0.5)) // attempt to run t2 t2.play(); In this case, t2 will never run the animation/TweenMax on #element1 if t1 never left the paused state. However, if t1 was ever actually played with t1.play() before the t1.kill(), t2 will work successfully. I'm not sure how this works internally with GreenSock or if there is a better way I should be changing out animation timelines on the same objects. This only seems reproducible if .pause() is called, and .restart() / .play() is never called on the timeline originally containing (in this case) #element1. Does anyone have a workaround or a better method for me? I've been banging my head on this for hours and have come to the conclusion it's either post here or start digging into GreenSock source.

I am trying to use tweenTo to skip panels if user clicks on it, but when i use oncomplete: resume , it goes back to panel where it was clicked rather than continuing. I apologize as I could not make a codepen. $(document).on("click", "h1", function(e) { var label = $(this).attr("panel"); e.preventDefault(); var t=timeline.getLabelTime(label); timeline.tweenTo(t,{onComplete:resume, onCompleteParams:[], ease:Strong.easeOut}); function resume() { timeline.resume(label); //it does not resume from label or time t } });

I'm creating a relatively complex nav layout for a single-page scrolling site using GSAP and ScrollMagic. The "upcoming" page in the navigation tweens upward as you scroll down until it hits the top of the nav, and then a page transition is triggered (which is unrelated to this issue). I've included a stripped-down Codepen with only the Nav - please view it in Full View using Chrome or Firefox to see the effect working properly. The value it's tweening to achieve that effect is relatively complicated - it's top: calc(-100vh + [nav container height] + [2x nav bottom property]) which has the effect of moving each item up but maintaining the same spacing once they're stacked at the top. I know there's an outstanding issue with tweening calc() values that's been on GitHub for a while - you can't tween them unless you first use TweenMax.set to establish the pre-tween calc value. Using that workaround got it to work in Chrome and Firefox, but it's still not working in Safari. Instead Safari waits until the end of the ScrollMagic duration and then simply jumps to the end value. I'm not sure what to do about this issue - I've tested it in Safari and tweening a non-calc value works fine, but I need a calc in order to achieve the effect I want. Any help would be appreciated!

Hi everyone, I am completely new to both GSAP and Gulp and I'm having troubles to run gulp after gsap installation. Don't know what to do. I have installed gsap this way: "npm install --save-dev gsap" and after that I add to my gulpfile.js gsap = require('gsap'); after that, i run gulp on my cmd and this shows up: C:\xampp\htdocs\00testing_code\node_modules\gsap\src\uncompressed\TweenMax.js:2535 _doc = document, ^ ReferenceError: document is not defined at Function.<anonymous> (C:\xampp\htdocs\00testing_code\node_modules\gsap\src\uncompressed\TweenMax.js:2535:11) at check (C:\xampp\htdocs\00testing_code\node_modules\gsap\src\uncompressed\TweenMax.js:5858:61) at new Definition (C:\xampp\htdocs\00testing_code\node_modules\gsap\src\uncompressed\TweenMax.js:5875:10) at window._gsDefine (C:\xampp\htdocs\00testing_code\node_modules\gsap\src\uncompressed\TweenMax.js:5880:12) at Array.<anonymous> (C:\xampp\htdocs\00testing_code\node_modules\gsap\src\uncompressed\TweenMax.js:2488:11) at C:\xampp\htdocs\00testing_code\node_modules\gsap\src\uncompressed\TweenMax.js:7634:9 at Object.<anonymous> (C:\xampp\htdocs\00testing_code\node_modules\gsap\src\uncompressed\TweenMax.js:7645:3) at Module._compile (module.js:409:26) at Object.Module._extensions..js (module.js:416:10) at Module.load (module.js:343:32) What did I do wrong?!? Am I missing something? Thanks in advance.

Hi Is it possible to have a container automatically resize it's height when a div inside of it is moving outside the container's height? in this pen - http://codepen.io/beamish/pen/LNXYGN - will it be possible to have the blue containing box automatically resize it's height when the contained red smaller box reaches the blue box bottom? Thanks, Elior

Hi, I am wondering what's the relationship between stagger's duration and stagger's staggerDuration. Looking at this code: TweenMax.staggerTo([mc1, mc2, mc3], 1, {x:100, y:200}, 0.25}). The time duration is 1 but there are 3 elements to stagger. mc1 = 0.25, mc2 = 0.25 + 0.25 mc3 = 0.25 + 0.25 + 0.25 1 - 0.75 = 0.25 (What happen to this extra 0.25?) - Is the duration the total duration for the whole stagger code (mc1, mc2 and mc3 combined?) And the stagger duration will modulate to fit within the whole duration? Thanks, Venn.

Hi there, Actually I am trying to achieve an animation using morphSVG plugin which is a scroll down indicator, as you can see in this pen which I prepared what happens is that the two SVG rectangles morph from top to bottom and that is fine but what I exactly trying to do is that after this step I want them to morph back again from top to bottom and not from bottom to top! Please advice, PS. I could not add the morphSVG plugin to this pen. Regards.

I am using TweenMax to animate the appearance and scaling of a Popup. It works fine in one view, but in another it occasionally does not appear until after the user starts to scroll the page beneath the Popup. The popup is just a div with three lines of text in three p elements. The animation of the popup is done as follows: var clickPos = String(event.detail.x) + 'px ' + String(event.detail.y) + 'px'; that.rootNode.appendChild(that.viewRoot); TweenMax.set(that.viewRoot, { scale: 0 }); TweenMax.to(that.viewRoot, 0.7, { scale: 1, transformOrigin: clickPos, immediateRender: true }); The css for the popup is as follows: #attribution { position: fixed; width: 80%; top: 10%; margin-top: 7%; margin-left: 7%; margin-right: 7%; padding: 3%; text-align: center; z-index: 200; background-color: rgba(255, 246, 233, 0.9); border-radius: 25px; border: solid; border-width: thin; box-shadow: 4px 4px 4px #777; -webkit-box-shadow: 4px 4px 4px #777; } Any ideas what could cause the delay in drawing, which sometimes occurs? When the program first starts, it will work fine, but after a while each popup does not appear unless one starts to scroll. Thanks for any help.

Hi everyone First, shout out to Diaco and rest of the Greensocks heroes. Thank you. I've enjoyed working with your script and all the answers you've provided here have been most useful. My WIP http://goo.gl/RWzDCK the js in the site is not yet optimized. I'm optimizing it on my local server. And here are the questions. 1) I'm animating a timeline of objects. Since there are other instances of these objects being used later on, I'm defining them before using them in my timeline. The problem is, there are some objects that are being generated based on conditions (for example, ".pencils") . Meaning some objects are only implemented in to the page in some cases. But when they do, they are animated within these timelines. So, when I define them before hand and call them in timeline later on, I receive "Uncaught Cannot tween a null target" if they are not present in the page. Is there a way to if(pencil) in timelinemax ? IF not, should I leave them as ".pencil" instead of pencil 2) Im currently animating several timelines and all time lines are animating sprites. In some cases, some timelines are either fired simultaneously or within few frames from eachother. In pcs and laptops onviously animations runs smootly but I start to see some lags (not cutout lags but like stutters ) in tablets and phones. I'm now trying to optimize the script but if there are any general tip on animating for mobile devices would be welcome. 3) I'm creating cookies and checking them in document.ready. This way, I would like to fire animations once every few day (since they are basicly small animation movies). Based on whether the cookie exist or not, I'm loading one of the two style sheets. They both have same elements but different images. StylesheetA has sprite images where else StylesheetB has static (and waay smaller), one frame images. So if cookies exist. No animation is fired, and only the static image is loaded. However, this approach causes more than half of the images to fail loading with errors stating the images are corrupt. After 2 week of trying to solve (changing ftp client since I'm thinking, the ftp client is corrupting images while uploading them) this problem, I've found out that the error is not due to images being corrupt but browsers are over encumbered loading styles and trying to get all the images.at the same time.Since, I dont receive the same problem when I leave stylesheets intact in the head. Is there a better way to overcome this problem? Any suggestion on the matter is welcome. Thank you

Hello, First of all thank very much for this incredible tool! I am an absolute noob developing animations (and web pages) and thanks to GSAP I've had to do so little efforts to learn . I am trying to rotate a image and control the animation, very similar to the Ferris example: http://codepen.io/GreenSock/pen/wBbKs?editors=1010 The user can select if the rotation is clockwise or counterclockwise. This is my question: is it possible to do a infinite reverse loop without TimelineMax, just a TweenMax instance? The problem is that, related with this rotation, I am drawing a sine wave based on the tween progress. However, when TimelineMax reaches onReverseComplete or onComplete, a small lag can be checked in the sine wave drawing, distorting the result. I do not find this lag if I use only TweenMax, but I am not able to do a reverse infinite loop only with TweenMax... Thank you in advance!!

Hello, Yes - I'm still using GSAP for Flash (It's awesome) - so I'll post my question here, even though it's very relevant to the Javascript version too. I'm sure some of you (especially the GreenSock folk) know about google's UI experience guidelines. Here's a link: https://www.google.com/design/spec/animation/authentic-motion.html Specifically, the authentic motion ones are very critical. It makes a night and day feeling when it comes to using apps and games. I'm wondering, to the Tween experts at Greensock, is it possible to do asymmetric deceleration like in the Mass and Weight section in this example, feels like the EaseIn and EaseOut are different numbers / factors? Thanks!

Hi! Think I found a bug of some sort that if I add a class name using TweenMax and my tweening object has already a classname that contains the same word it removes. Example: Want to add a class by name: "hover" My div has classes: <div class="btn animate-hover color-green">My Button</div> The result will be: <div class="btn animate- color-green hover">My Button</div> It shouldnt behave like that am I right? If using underscore it works: <div class="btn animate_hover color-green hover">My Button</div> Possible to solve this? Many thanks!

Hi guys, I'm building a bit of unique accordion where the sections are cards that swap on top of each other. the idea is to have the top one stuck to the top at all times. In order to set this layout up I've made the wrapper position relative with the sections position absolute with a top of 0; I'm making the tops of each section offset using translateY via js because the accordion needs to be dynamic. I'm almost there it feels but I can't seems. Howver my challenge now is to make is so when you have slide 1 open. if you swipe up from slide 4 to have slide 3 and 2 track up wards with the movement. I've got it behaving correctly via taps but I really need it work with dragging as well. any thoughts? Thanks! Jason http://codepen.io/OrganicPixels/pen/VaXbVV

I've created some morphing icons that morph back and forth with different easing functions on .mouseenter() and .mouseleave() (using jQuery .hover method) I'd like to force the Tween in my hoverOver functions to complete before the hoverOff function is allowed to start. I'm a little stumped on how to achieve this. Can anyone point me in the right direction of how to do this?

Hi, I want to collapse a <hr /> and then open it again, please see the codepen. First problem is that setting the width to 'auto' is not quite working. Next Problem is that the hr collapses towards the left and not to the center. Any suggestions? Thanks in advance!

Hi everyone, This is my first post here. First I want to say thank you to the people who provided these absolutely amazing animating tools for web which make the web a more fun place to code for. Then I think I have found a bug in the animation flow which at least exists in TimelineMax but I am suspecting the source to be in the TweenLite as to my understanding is the origin for all the animations. The problem: When I make a TimelineMax object and add TweenMax.to() animations to it, if the animation is done only on standard HTML elements things will work flawlessly, but as it can also be seen in the CodePen I provided, when I have a SVG element with its children elements, if I want to animate the children elements in the middle of a timeline two things will happen. 1) The SVG elements animation order will be missed up and will not work correctly. 2) The animation on the standard HTML elements will not wait for the SVG elements animation to be finished. In other words, the animation on the standard HTML elements registered after the SVG elements will be started on the same time as the first SVG element's animation. I have reviewed the order and timings several times and I think they are correct. I have also written the code several times from scratch to make sure that I am not messing anything up. It would be really nice if you can figure this bug out and release a new bug-fix version. I am currently working on a project and I really need this feature to word correctly. Thanks in advance.

Hey everyone, Image you have a cartoony chess game. And you're sliding the queen from one end of the board to the other. I want to add a teetering effect, with the piece pivots on it's base a bit to begin it's slide, and then teeters in the other direction when it ends. I have the pivot centre at the bottom center, but I can't seem to find an elegant way to pivot back and forth. So what I've done is: var maxTilt:Number = 10; // degrees var slide:TimelineLite = new TimelineLite( { autoDispose:true } ); slide.add(TweenMax.to(obj, DURATION / 4, { rotation: -maxTilt} )); slide.add(TweenMax.to(obj, DURATION / 2, { rotation: maxTilt } )); slide.add(TweenMax.to(obj, slide.add(TweenMax.to(obj, DURATION, { startAt: { x:from.x, y:from.y }, x:to.x, y:to.y, ease: Back.easeInOut.config(1.0) } ), 0); DURATION / 4, { rotation: 0} )); Problem is the nice ease effects can't be transitioned between the tils. Is the best way to do this? I hope not. Thank you! Mark