Search the Community

Hello there! I'm using TimelineMax to make a sequence for 3D objects using Three.js. So far so good, when working with numerical properties of objects. But I'd like to set true/false properties and use the state of the timeline. I know I can do my own functions (onComplete, onStart,...) but that requires me to keep control of the state while the timeline is playing, which is similar to create my own timeline function. The idea is to be able to scrub the playhead. So I used .set, both in TimelineMax or TweenMax to no luck. For instance: tm = new TimelineMax({align: start}); tm.add( new TweenMax(camera.position, 10, {x:100, y:100, z:100}), 1); //Works well tm.set(target, { visible: false }, 4); //Doesn't work tm.add( TweenMax.set(target, { visible: false, immediateRender: false, delay: 4}, 0); //Neither tm.add( TweenMax.set(target, { visible: false, immediateRender: false}, 4); //Neither Any ideas? Thanks

Hello, I'm having two issues right now, which I cannot figure out. Issue #1 I have an animation in my CodePen using the first button, and when it finishes it's animation cycle it reverts the cssText back to it's original position. This is for a "preview" animation set up in my software. This will essentially revert back to the original position, so the user can modify their design layers, animation settings, etc, before playing their animation again. However, on the second run of this animation it seems the translated position is not working properly or some sort of caching mechanism is not recognizing the reverted cssText. It gets stuck to the left of the box where it was on exit. To give more details on this, my design software works based off finished designs, and once a design is finished the user can choose to have things enter the screen at different timings (as well as optionally exit after) I provide entrance, exit animations and in this case it rotates in from left, and rotates back out to the left. If you need more clarification, let me know. Issue #2 I'm having an issue with setting up a timeline without automatically playing. I've added the flag "paused: true" in the TimelineMax options, but what this does is begin positions for the element where the TimelineMax.from() defines, rather than keeping the element in it's ending position until we trigger play to run. I use a chained method in my code prepareAnimationTimeline() which should add all the timings, animation tweens together but returns the timeline object back ready to play, while not moving my elements. I use it like this: prepareAnimationTimeline().play() However if I do not call play, with paused: true, it will simply move my elements off screen in their starting positions for my entrance animations. (TimelineMax.from()) Is there any way to achieve what I'm looking for, where I keep elements on the screen and "prepare" my animation timeline in the fashion I mentioned above? Thanks, Justin

Hello, I have no code pen URL for this question, because I don't know if I can get this in there without importing most of my animation framework, etc. This is really a question of how to accomplish this in your framework. Background Details I have a configuration file in PHP which provides the details for each Tween animation, and I've specified friendly names in my code to give me details of the animation. I'll post an example of one of the animations in the end of this post so you can see the fields, structure I provide. I have a JSON object below which represents how I format my object before passing it to my functions to animate. { "entrance":{ "900":[ { "layerId":"HLS2-3033-N25V", "animation":"bounceInLeft", "speed":0.49, "time":900, "easing":"Power1.easeIn" } ], "1700":[ { "layerId":"5MBE-0R7G-65NK", "animation":"zoomInDownRotate", "speed":0.9, "time":1700, "easing":"Power4.easeOut" } ] }, "exit":{ "4800":[ { "layerId":"HLS2-3033-N25V", "animation":"slideOutLeft", "speed":0.49, "time":4800, "easing":"Power1.easeIn" } ], "6900":[ { "layerId":"5MBE-0R7G-65NK", "animation":"slideOutLeft", "speed":0.9, "time":6900, "easing":"Back.easeInOut" } ] } } This array above is sorted by Entrance and Exit animations, and in each of these I have indexes by MS timings from 0 - 10000 (0-10s) I obtain the animation details using the name, and it returns in a structure like below, which I use to produce my single animation on one element nicely. { "name":"bounceInLeft", "type":"Bouncing", "stageType":"entrance", "defaultDuration":0.35, "defaultEasing":"Power1.easeOut", "series":[ { "x":"{elementOuterStartLeft}", "opacity":0, "duration":0.8, "ease":"Elastic.easeOut.config(.85, 0.4)" } ] } So with these 2 pieces, I run my animation for a single layer using TimelineMax and then I loop through the series of the animation keeping the first index using timeline.from() with my parameters, while any other index in the series array is using timeline.to() My question is this: Knowing when each of the animations are going to begin, using the MS indexes in my above format, can I "schedule" the tweens to play when the MS is reached in the 0-10s interval? How would I implement this using purely your framework? I would essentially add a from/to for each animation series item, whenever the animation is called and it's timing matches the current point in the 0-10s interval. I'm trying to utilize this similar to the example on your CodePen : http://codepen.io/GreenSock/pen/zinsg so that I can control pause, play, and the timing range for the animation as a whole (for all my elements being animated) Let me know if you need further clarification. Thanks, Justin

Hello, I've set up a demo CodePen below, which was set up with an element (similar to our Design application's element structure) with an already defined rotation matrix on the parent element we are transforming. CodePen URL: http://codepen.io/jbevan2007/pen/RKKVrW We've added various transitions such as slideInLeft, slideInLeftRotate, and others which provide entrance and exit animations to our canvas/scene within a 10-20s window of animation. We set these up similar but customized from Animate.css and the basic animations they use. Our elements are rotated in absolute position, some using transform matrix to merely control rotation. Our positioning is controlled via left/top CSS properties. Our issue: When we apply the transform with left (outside canvas) tweened to 0, (maintaining our original left/top in parent), we lose our rotation matrix. One of my solutions was to apply the matrix and animation to the inner layer, and this works well to keep our rotation as expected. The issue with this solution, is that our starting point is not coming from left direction due to having a transform within another transform. You can see this occur with the second button in the CodePen demo. Is there any way we can achieve this, while maintaining our rotation at completion of animation? Please let me know if you have any questions or if you did not understand my request. Thanks, Justin

I have a button that when clicked, triggers my timeline to play. There is no delay on start and on the first click it works fine. On subsequent clicks, it takes time for the animation to start. Any idea what I'm doing wrong? I've tried triggering the animation with just TL.restart() and also having an onComplete function that sets the timeline's progress to 0 and pauses it. Any idea how I remove that delay on subsequent clicks? Code here: var tl = new TimelineMax({paused: true, onComplete: resetTl}); TweenMax.set('.fab', {perspective: 200}) tl.to('#sendplane', 1, {rotation: -20, opacity: 0, x: '+=100', ease: Elastic.easeIn.config(1, .9), onComplete: resetPlane}) .to('.fab', .25, {scale: 1.2, boxShadow: '0px 7px 15px rgba(0,0,0,0.1)'}, '-=.8') .to('.fab', 2, {rotationY: -360, ease: Elastic.easeIn.config(1, .9)}, '-=1.8') .fromTo('.checkmark', .5, {drawSVG: '0%'}, {drawSVG: '100%'}) .to('.fab', 2, {rotationY: 360, ease: Elastic.easeIn.config(1, .9)}) .to('.checkmark', .2, {opacity: 0}, '-=1.1') .to('#sendplane', 1, {x: '+=100',opacity: 1}, '-=.4') .to('.fab', .25, {scale: 1,boxShadow: '0px 0px 5px rgba(0,0,0,0.3)'}) function resetPlane(){ TweenMax.set('#sendplane', {x:'-=200', rotation: 0, opacity: 1}) } function resetTl(){ tl.progress(0) tl.pause() } document.getElementById('fab').addEventListener('click', function(){ tl.play() //I've also tried tl.restart() and it still has a delay. })

Hi, is there a way to change the easing method of a tween in a timeline when reversing the timeline? My example.: var tlDrops = new TimelineMax({paused:true, delay:2, reversed:true}); tlDrops.from("#geschenkedrops", 0.2, {bottom:0, right:15, ease:Back.easeOut}, "starting") .to("#geschenk", 0.5, {autoAlpha:0}, "-0.1") .to("#merci-button", 0.5, {autoAlpha:1}, "-0.1") .from("#hauptgeschenk", 0.5, {bottom:25, right:25, width:1, height: 1, rotation:180, ease:Elastic.easeOut}, "geschenke") .from("#geschenk2", 0.5, {bottom:25, right:25, width:1, height: 1, rotation:160, ease:Elastic.easeOut}, "geschenke") .from("#geschenk3", 0.5, {bottom:25, right:25, width:1, height: 1, rotation:140, ease:Elastic.easeOut}, "geschenke") .from("#close-button", 0.2, {bottom:25, right:25, ease:Sine.easeOut}) .to("#geschenkedrops", 0, {autoAlpha:1}, "closing"); Now I would like to change all Elastic.easeOut easing methods into a different method (e.g. sine.easeIn) on timeline reverse. Is that possible, or do I need to create an extra timeline for the reverse function? Thanks so much, Rob

Hi I would like to create an animation where the text slide ups vertically to be replaced with some coming in from below. I would like this to happen on a loop. Here is a codepen for where i've got to so far, before getting stuck http://codepen.io/emilychews/pen/qRENKR The problems I have are: i) The last tween on the timeline seems to be setting the first text div lower in its container prior to the animation starting (you may need to refresh the page to see this properly). When the animation starts this does correct itself, but I need to find out how to prevent this. ii) I can't work out how to loop the animation properly. I currently have it repeating with the {repeat-1} property set on the main timeline, but this isn't a true constant loop. I can't work out how to have it so the text on screen always moves up when leaving and always comes in from the bottom when arriving (this is proving particularly problematic at the end of the animation). Any help would be really appreciated. Many thanks, Emily.

Hi, I have many TimelineMax animations either running at the same time, or not running at all; is it possible to create an event that will be called everytime any timeline is ticking, and get the timeline that is ticking in that event? an alternative would be to set a simple javascript setTimeout call but only if I can tell if there are currently no running animations; is it possible to check if ANY timeline is currently running? Thanks, Elior

Hi guys, As you can see in my codepen, I have a couple of svgs that have a filter applied. I would like to be able to apply the tweens I stored in the "addClass" and "removeClass" variable to specific id elements. How would I be able to achieve this? So that I can toggle the saturation. Any ideas? Thanks!

I created a master timeline so my 6 timelines animate one after the other when the page is loaded. I would like each separate timeline to animate separately on mouse enter. I can manage to do either one of the above but not both. I've got to achieve this using setTimeout function to animate on load. But I would prefer staying with GSAP for this. How can I achieve this. Please note that I am very new at this!

Hi everyone, I'm hoping you can help me. I'm putting together an animation of a play button. Everything works fine on mouseenter and mouseleave, but my problem is, the SVG is not rendered on page load. The circle, that is. What I tried: When I removed `.fromTo($circle, .3, {opacity: .5, drawSVG: '100% 100%'}, {opacity: 1, drawSVG: 'true', ease: Expo.EaseOut})` from my timeline, the bug disappeared. For some reason, the drawSVG of 100% 100% seems to be applied to the svg even though the timeline is paused? Timeline.progress has not worked, but clearProps: drawSVG did fix it (although obviously I can't clear the drawSVG on init). Any help would be hugely appreciated. Thanks! PS. Sorry a codepen isn't included. I don't have a PRO account so I couldnt upload GSAP to it. LMK if you'd still like me to create it if it makes it easier for you to debug. $playButton.each(function (index, elem) { $this = $(this); var $circle = $this.find('#play-icon__circle'); var $caret = $this.find('#play-icon__caret'); TweenMax.set($caret, {transformOrigin:"50% 50%", scale: 1}); TweenMax.set($circle, {opacity: 1, rotation: "-90", transformOrigin:"50% 50%"}); var playButtonTimeline = new TimelineMax({paused: true}); playButtonTimeline .fromTo($circle, .3, {drawSVG: 'true', opacity: 1}, {opacity: .5, drawSVG: '100% 100%', ease: Expo.EaseOut}) .set($circle, {rotationX: -180}) .fromTo($circle, .3, {opacity: .5, drawSVG: '100% 100%'}, {opacity: 1, drawSVG: 'true', ease: Expo.EaseOut}) .to($caret, .2, {scale: .7, ease: Expo.EaseOut}, '-=.4'); $this .mouseenter(function () { if(playButtonTimeline.isActive()){ e.preventDefault(); e.stopImmediatePropagation(); return false; } playButtonTimeline.play(0); }) .mouseleave(function () { if(playButtonTimeline.isActive()){ e.preventDefault(); e.stopImmediatePropagation(); return false; } playButtonTimeline.reverse(0); }); });

Hi there, I'm experiencing a problem where I'm trying to have 2 items animate at the simultaneously in a timeline. No matter how much I set the time of the tween, it seems to still be playing in sequence rather than simultaneously. Anyone know whats up? Thanks!

Hi, I created this page several months ago and everything was working great on all major browsers. Now when I check it on chrome and click on "See their time fly", it will start the animation and look good until it starts to render weird and only show part of a photo. Eventually it just kind of breaks. Do you have any idea why this is happening? This page continues to work great on Safari and Firefox. Here is my code: var photoItem = $('.photo_item'), groupOne = $('.group-one .photo_item'), groupTwo = $('.group-two .photo_item'), groupThree = $('.group-three .photo_item'), groupFour = $('.group-four .photo_item'), groupFive = $('.group-five .photo_item'), beforeLastPhoto = $('.photo_item.mod-before-last'), pulseEl = $('.photo_item.mod-last'), lastPhoto = $('.photo_item.mod-last'), currentItem = 0, rotateValues = ["-20deg", "20deg", "-10deg", "10deg", "0deg"], widthOffset = 100, heightOffset = 100, containerWidth = $('.photos').width() - widthOffset, containerHeight = $('.photos').height() - heightOffset, masterTimeline = new TimelineMax(), replayTimeline = new TimelineMax(); Draggable.create(photoItem, {type:"x,y", edgeResistance:0.2 }); $('.js-btn').one('click', function(){ start(); }); $('.js-restart-btn').on('click', function() { restartTimeline(); }); function start() { $('.js-btn').addClass('is-not-visible'); $('.js-restart-btn').addClass('is-visible'); masterTimeline.set(photoItem, { clearProps:"zIndex" }) .add(beginGroupOne()) .add(beginGroupTwo(), "-=.7") .add(beginGroupThree(), "-=.5") .add(beginGroupFour(), "-=.3") .add(beginGroupFive(), "-=.05"); } function beginGroupOne() { var tl = new TimelineMax(); groupOne.each(function(index, element) { tl.set(element, { x: getRandomInt(100, containerWidth), y: getRandomInt(50, containerHeight), rotation: getRandomRotate(), xPercent: -50, yPercent: -50 }) }); tl.staggerTo(groupOne, 1.25, { scale:1, autoAlpha:1, ease: Expo.easeOut }, .5, 0); return tl; } function beginGroupTwo() { var tl = new TimelineMax(); groupTwo.each(function(index, element) { tl.set(element, { x: getRandomInt(100, containerWidth), y: getRandomInt(50, containerHeight), rotation: getRandomRotate(), xPercent: -50, yPercent: -50 }) }); tl.staggerTo(groupTwo, .75, { scale:1, autoAlpha:1, ease: Expo.easeOut }, .3, 0); return tl; } function beginGroupThree() { var tl = new TimelineMax(); groupThree.each(function(index, element) { tl.set(element, { x: getRandomInt(100, containerWidth), y: getRandomInt(50, containerHeight), rotation: getRandomRotate(), xPercent: -50, yPercent: -50 }) }); tl.staggerTo(groupThree, .5, { scale:1, autoAlpha:1, ease: Expo.easeOut }, .2, 0); return tl; } function beginGroupFour() { var tl = new TimelineMax(); groupFour.each(function(index, element) { tl.set(element, { x: getRandomInt(100, containerWidth), y: getRandomInt(50, containerHeight), rotation: getRandomRotate(), xPercent: -50, yPercent: -50 }) }); tl.staggerTo(groupFour, .25, { scale:1, autoAlpha:1, ease: Expo.easeOut }, .1, 0); return tl; } function beginGroupFive() { var tl = new TimelineMax(); groupFive.each(function(index, element) { tl.set(element, { x: getRandomInt(100, containerWidth), y: getRandomInt(50, containerHeight), rotation: getRandomRotate(), xPercent: -50, yPercent: -50 }) }); tl.staggerTo(groupFive, 1.75, { scale:1, autoAlpha:1, ease: Expo.easeOut }, 1, 0); tl.to(beforeLastPhoto, 1.75, { x: -65, y: 115, xPercent: 0, yPercent: 0, scale:1, rotation: -20, autoAlpha:1, ease: Expo.easeOut }, "-=.5") .to(lastPhoto, 1.75, { x: 0, y: 0, xPercent: -50, yPercent: -50, scale:1, rotation: 10, autoAlpha:1, ease: Expo.easeOut }, "-=.5") .addCallback(finished, "+=1"); return tl; } function moveOff() { var tl = new TimelineMax(); tl.to([groupOne], 1.5, { yPercent: -1000 }, 0) .to(groupTwo, 1.5, { xPercent: -1000, }, 0) .to([groupThree, beforeLastPhoto], 1.5, { yPercent: 1000 }, 0) .to([groupFour, groupFive, lastPhoto], 1.5, { xPercent: 1000 }, 0); return tl; } function finished() { pulseEl.addClass('is-animating'); } function restartTimeline() { masterTimeline.set(photoItem, { clearProps:"zIndex" }) pulseEl.removeClass('is-animating'); replayTimeline.add(moveOff()) .addCallback(restart); } function restart() { masterTimeline.restart(); } function getRandomRotate() { return rotateValues[Math.floor(Math.random() * rotateValues.length)]; } function getRandomInt(min, max) { return Math.floor(Math.random() * (max - min + 1)) + min; }

I've created a series of animated icons. See in the codepen. on the end of the timeline i have added a tween to ramp the speed up as the timeline progresses. var NUM6Timeline = new TimelineMax(); NUM6Timeline.staggerFrom(".SET6>g", 0.7, { opacity:0,}, 0.15) .from(".top6", 2.4, {x: '-22%', y: '22%', opacity:1, },0.0) .from(".shd6", 6, { opacity:0}, 0) .from(".sticker", 1, {transformOrigin:"50% 50%", scale:0, opacity:0, ease:Back.easeOut },2.2);TweenLite.to(NUM6Timeline, 2.5, {progress:1, ease:Power2.easeIn}); Because the end tweenlite is not part of the timeline when I come to repeat the timeline, i lose the tween light. Could someone help me nest NUM6Timeline in a new timeline so I can include the progress tween. This master timeline I should then be able to loop on my page and included the ramped up animation. Kind regards, Ryan

It may look simple (to you guys it's a no-brainer) but I've managed to get two animations working over the weekend (yeah, it took me that long). If you get a chance and need a laugh, can you take a look at what I've written and tell me how I could have done it better please. 1) blinking light. Scope: Flash button to indicate to a visitor that there is a button they can press. I have two imaged (button off, button on) I want button on to be animated so as it turns on quickly then fades out. When someone hovers over the button, the animation should stop and go back to the beginning (so as the on state is fully visible) then restart when hover out. The only down side about my current implimentation is that when you hover over one of the buttons, all the other buttons pause and restart. I'm guessing I'll have to have id's for each button (rather than using the class name) and create timelines for each. <p>flash / blink</p> <div class="press"> <div class="here"></div> </div> <p>in reality the above are transparent pngs</p> .press { background-color:blue; width:50px; height:50px; position:relative; } .here { background-color:red; width:100%; height:100% } var pressTween = new TimelineMax({repeat: -1}); pressTween.to(".press .here", 1.5, {alpha: 0}) .to(".press .here", .5, {alpha: 1}); $(".press .here" ).hover( pause, start ); function pause(){ pressTween.pause(); pressTween.seek(0); }; function start(){ pressTween.play(); }; 2) Alternate flashing lights: This is where I need some help, Basically I want two square waves running in parallel with each other, one off-on-off-on etc the other, on-off-on-off etc. I'm sure I could do in on one timeline but I just couldnt get it to work no matter what I tried. The only way was to have two time lines. <p>square wave</p> <div class="box red" id="seoTicker"></div> <div class="box blue" id="seoTickerHover"></div> <p>in reality the above are transparent pngs</p> .box { width:50px; height:50px; position:relative; margin-bottom:2px; } .red { background-color:red; } .blue { background-color:blue; opacity:0; } var seoTween = new TimelineMax({repeat: -1}); seoTween.to("#seoTicker", 0.1, {alpha: 0, delay:1},0).to("#seoTicker", 0.1, {alpha: 1, delay:1}); var seoTween2 = new TimelineMax({repeat: -1}); seoTween2.to("#seoTickerHover", 0.1, {alpha: 1, delay:1},0).to("#seoTickerHover", 0.1, {alpha: 0, delay:1}); The linked codepen shows them both working albeit with blocks with background colours compared to transparent PNGs in real life Cheers, in anticipation of any advice you can offer (as long as the advice isn't to give up the day job ).

I've added some code to allow the timelne start slow and end fast. I want to put this on a master timeline with others. If you uncommnet out my Master timeline you will notice the time line tween no longer takes effect TweenLite.to(NUM1Timeline, 3, {progress:1, ease:Power2.easeIn}); I 'm clearly doing something wrong as this is not adding to the master timeline as I would like. any help would be much appreciated Ryan

Hi, any help would be great right now. http://codepen.io/Ryan84/pen/aBBVWg?editors=1010 I don't want to fade on the numbers but instead run a timeline I have built for each number. these are included in the JS. They look like this: 1 http://codepen.io/Ryan84/pen/zooKZK?editors=1010 2 http://codepen.io/Ryan84/pen/JbbRXE 3 http://codepen.io/Ryan84/pen/xRREVR 4 http://codepen.io/Ryan84/pen/qqqaNr 5 http://codepen.io/Ryan84/pen/MbbjjW 6 http://codepen.io/Ryan84/pen/XNNjNd?editors=1010 At the moment when point 1 is clicked im saying fade on number one and hide all others. Ideally I want this to run when clicked:(instead of a fade on) var NUM1Timeline = new TimelineMax({paused: true}); NUM1Timeline.staggerFrom(".SET1>g", 0.8, { opacity:0,}, 0.18) .from(".top1", 2.4, {x: '-22%', y: '22%', opacity:1,},0.0) .from(".shd1", 6, { opacity:0,}, 0) .from(".blk10", 1, {transformOrigin:"50% 50%", scale:0, opacity:0, ease:Back.easeOut },2.2);TweenLite.to(NUM1Timeline, 3, {progress:1, ease:Power2.easeIn}); Any help would be really appreciated. Kind regards, Ryan

I'm having trouble sequencing multiple timelines. I don't want the the second timeline (NUM6Timeline) to be visible till layer 1 has complete. I need to do this on 6 timelines but have just included 2 timelines in this codepen. ideally I would also like to fade out timeline1 before the next happens. When I try with 6 I get in a right mess and not having much luck with 2 either.. any help would be much appreciated. I've noticed i also lose the the ease on the second timeline (NUM6Time) so the animation loses its gradual build up regards, Ryan

Hi, I'm facing a problem in a complicated web application which is difficult to isolate into a pen, so I was thinking of just sharing the situation and perhaps getting some possible clues as to what to look for to understand why this problem happens: I have one DIV with 2 TimelineMax timelines. Each timeline is made of two tweens of this DIV. In the first timeline the tween starts at autoAlpha 0 at the first tween and ends at autoAlpha 1 in the second tween, and in the second timeline the situation is the opposite: starting from autoAlpha 1 and ending at 0. The duration of the two timelines is different: the first is 2 seconds, the second is 1.5 seconds. Other than that there is nothing else. Now I create these two timelines. The second one runs perfectly well. The problem is in the first: it "jumps" directly from autoAlpha 0 to 1 without any smooth chage between the two states. If I recreate the first timeline then it works well with smooth changes (and the second one is also smooth as it was before). Any suggestions as to where to look?... Thanks ! Elior

I have a timeline which I need to jump around a few times, in the following way: 1 x Start 3 x Middle section 1 x End So the Start animation plays once, and leads into the Middle section which is repeated 3 times, and then finally the End animation plays once and the whole thing finishes. I'm not quite sure how GSAP wants me to handle such a situation. I made three timelines, and placed an onComplete in Start, calling Middle -- which loops three times, and then called an onComplete for End. Unfortunately GSAP doesn't seem to like me creating three timelines. var TLend = TimelineMax({ repeat: 0, paused: true, defaultEase: Power4.easeInOut }); var TLmiddle = new TimelineMax({ repeat: 2, paused: true, pauseDelay: 3, defaultEase: Power4.easeInOut, onComplete: function() { TLend.play() } }); var TLstart = new TimelineMax({ repeat: 0, paused: true, defaultEase: Power4.easeInOut, onComplete: function() { TLmiddle.play() } }); If I do this, I get a weird error: tweenmax…_min.js:16 Uncaught TypeError: Cannot set property 'vars' of undefined I assume that GSAP wants me to work in a different way (perhaps using pause() and resume()?). What's the best way to achieve what I want in GSAP? Thanks!

Hello all, I have a slight problem and any help would be greatly appreciated, I am an animator new to the world of code and greensock. I'm looking to build something similar to the visions section on this waaark site: http://waaark.com/vision/ As you can see from the code pen I have built the outer circle forming and have built a timeline with a slider to controll the progess of the outer circle. I have managed to link each point so that when it is clicked the timeline go to the corrrect progress. http://codepen.io/Ryan84/pen/rWLNLN ideally I would Like this to tween to the correct progress and not jump as it is currently downing. I've tried a tweenTo() put cant seem to get this to function. The box2Timeline also should not animate the full way through as it currently does but function like waaark once this is fixed I'm going to also add a scroll function and then a inner icon to animate on when the corresponding point is clicked. Any help would be greatly appreciated. Kind regards, Ryan

Hello GSAP community! Been learning GSAP as of late and really loving it however i am stuck in developing this particular banner. I have set up all my html, css and JS created my ids and variables and developed a single timeline for animation. However it seems for some reason the timeline only plays the first 2 tweens and then stops even though i have more animation to follow. have a look at my codepen to see what i am trying to achieve here: https://codepen.io/Caderial/pen/LbYRVZ What i would like is to at first set mainScene, NYScene, NJScene, PAScene all to beoffscreen to the left by 322px. then the animation should kick in and slide in each scene and slide it back out then slide in the next scene and so on. But for some reason my first two timeline events happen with mainScene but then it stops? Please advise. I am also open to any alternative methods of bringing in pages/scenes into and out of view that may be better then my solution. thanks everyone!

Good evening, We having some problem with Drawsvg Plugin. I try to explain what is our problem: In this case, I have a Timeline, with the three states of some button ( the labels "over", "out" and "cli" severaly). In the third state ( the last), it launch the event "click" to execute the code in the "cli" Label. But, as we could see in the developer inspector, the property stroke-dasharray has changed when the DrawSVG is doing when we don´t change this element (polyline class="st1") in anytime. In the inspector you can see this value: stroke-dasharray: 0px, 999999px; Here we put the URL of the codePen that I make like a example: http://codepen.io/stoicom/pen/rrdAJj If you should take a look, and tell me which could be the problem, or error? Thank you very much for yout support. Best Regards!! Rogelio Silván.

I'm a newbie, I did read the docs, but could not find an answer that fitted, or at least did not understand correctly apparently. I do not undestand why I can not control the first TL, while animating the second one. I 've tried almost every thing, been on this for two days, 7 hairs left, please help me obi wan, you are my only hope. Also, am I in the right direction at all ?

I am using "Section Slides (manual)" example from "http://scrollmagic.io/examples/advanced/section_slides_manual.html". When I try to implement the anchor tag link for this page i am not able to achieve the functionality. Below code for page scrolling $(function () { // wait for document ready // init var controller = new ScrollMagic.Controller(); // define movement of panels var wipeAnimation = new TimelineMax() // animate to second panel .to("#slideContainer", 0.5, {z: -150}) // move back in 3D space .to("#slideContainer", 1, {x: "-25%"}) // move in to first panel .to("#slideContainer", 0.5, {z: 0}) // move back to origin in 3D space // animate to third panel .to("#slideContainer", 0.5, {z: -150, delay: 1}) .to("#slideContainer", 1, {x: "-50%"}) .to("#slideContainer", 0.5, {z: 0}) // animate to forth panel .to("#slideContainer", 0.5, {z: -150, delay: 1}) .to("#slideContainer", 1, {x: "-75%"}) .to("#slideContainer", 0.5, {z: 0}); // create scene to pin and link animation new ScrollMagic.Scene({ triggerElement: "#pinContainer", triggerHook: "onLeave", duration: "500%" }) .setPin("#pinContainer") .setTween(wipeAnimation) .addIndicators() // add indicators (requires plugin) .addTo(controller); }); Below code i used for anchor tag click event // change behaviour of controller to animate scroll instead of jump controller.scrollTo(function (newpos) { TweenMax.to(window, 1, {scrollTo: {y: newpos}, ease:Power1.easeInOut}); }); // bind scroll to anchor links $(document).on("click", "a[href^='#']", function (e) { var id = $(this).attr("href"); if ($(id).length > 0) { e.preventDefault(); // trigger scroll controller.scrollTo(id); // if supported by the browser we can even update the URL. if (window.history && window.history.pushState) { history.pushState("", document.title, id); } } }); Please suggest me how to achieve anchor link functionality