Search the Community

i'm trying to use the window vertical scrollbar of the browser as slider of an istance of timelineMax. i'm also using the plugin scrollToPlugin. all seems working, with the not negligible detail that the timeline.progress is not the same of the scrolling percentage. Both, timeline progress and scrolling start from 0 and end to 1, but in all other points are differents. so, if i try to move the verical scrollbar (as timeline slider) and then i set the timeline.progress with the scrolling percentage, the scrollbar (and the page) move immediatily to another position, very different position. I prepared a simple page at this address www.attivitacollaterali.it/testArea/scrollTimeline.html (all the scripts are in the head - do no use the mouse wheel when scrolling) Maybe all the world knows "why" this strange behavior, excpet me. Thank you.

As a former user of Adobe Edge, which has apparently been abandoned, I am going to have to rewrite a couple of Edge animations in GSAP. I am thinking of using Timeline Max to create what is essentially an animation that just changes the image a viewer sees, according to what button he clicks. The idea is that, for instance, when a viewer clicks on button 4 (in a series of numbered buttons), the timeline advances to the designated frame and stops. Same action for all buttons. Are there any examples of this type of "animation" using Timeline Max that anyone knows of?

I'm having some trouble with isSelector in TimelineMax.min.js and lazyTweens in TimelineMax.js . . . . The project I'm referencing can be accessed with password ' Olympus003 ' at https://st-fresh.github.io/electroncycle/electroncycle.html . . . . . . The _internals object has the isSelector prop on it, and here's the call stack: TimelineMax.min.js:12 Uncaught TypeError: Cannot read property 'isSelector' of undefined at Function.<anonymous> (TimelineMax.min.js:12) at h.check (TweenMax.min.js:15) at new h (TweenMax.min.js:15) at y._gsDefine (TweenMax.min.js:15) at TimelineMax.min.js:12 at TimelineMax.min.js:12 ... ... I noticed that in Timelinemax.js (unminified) the error is a bit different and is with reference to the lazyTweens prop: TimelineMax.min.js:29 Uncaught TypeError: Cannot read property 'lazyTweens' of undefined at Function.<anonymous> (TimelineMax.min.js:29) at h.check (TweenMax.min.js:15) at new h (TweenMax.min.js:15) at y._gsDefine (TweenMax.min.js:15) at TimelineMax.min.js:17 at TimelineMax.min.js:1281 . . . . . . I'm a bit unfamiliar with the TimelineMax library at this time, and just wanted some scope on handling this error, I appreciate any help you can offer within a return message, and thanks for TimelineMax ! What I tried// In the unminified I tried adding TweenLite.js to the project to see if the var dependent on TweenLite would get defined.. This wasn't a quick solution.

Hi all, Firstly, thank you for this wonderful tool! I'm having some issues combining the ScrollToPlugin with TimelineMax. What I'm doing is basically a bunch of animations in a TimelineMax ending with a scrollTo at the end (to move to another section). This works the first time, but scrolling back up and down again has some issues. The animations all fire properly, but the ending scrollTo doesn't work (is only fired the very first time). Is this a known bug or intended behaviour?

Hi there, I have a banner that loops 3 times: var tl = new TimelineMax({repeat:3}); tl.append( TweenLite.from($(".text1"), 0.5, {alpha:0})); tl.append( TweenLite.to($(".text1"), 0.5, {alpha:0}),"+=2.5"); tl.append( TweenLite.from($(".text2"), 0.5, {alpha:0}) ); tl.append( TweenLite.to($(".text2"), 0.5, {alpha:0}),"+=2.5" ); tl.append( TweenLite.from($(".tele"), 0.5, {alpha:0}) ); tl.append( TweenLite.to($(".tele"), 0.5, {alpha:0}),"+=2" ); tl.append( TweenLite.from($(".endframe_logos"), 0.5, {alpha:0}) ); tl.append( TweenLite.to($(".endframe_logos"), 0.5, {alpha:0}),"+=4" ); After it's finished the 3 loops, I don't want the last Tween to fire. instead stopping at the 2nd from last line Is this possible using a label or some such? Thanks

Hello. In the beginning on my code I declare a new TimelineMax object, and I add a new tween that has a delay using the to() method (this is a simplified version, i do add more tweens to this Timeline). The delay is defined by a previously declared variable (var). var tl = new TimelineMax() .to("#answerTextarea", 1, { someProp: "value", delay: delayVariable }) After this, delayVariable changes. When i replay the tl though, the delay is not equal to the new value. I tried invalidating tl using the invalidate() method, but this doesn't invalidate the delay. How should I proceed so that the delay is updated everytime I restart the tl?

I have the following code and it works like a charm. Every card (card1, card2, etc...) "travels" from position 1000 to original with a .1 speed. What I'm trying to accomplish is to have every card travel at speed ".1" until it reaches 80% of "y" and then travel at a lower speed for the rest of the "trip". How can I achieve this? tl: any; this.tl = new TimelineMax({delay: 1}); this.tl .from(card1, .1, { y: 1000}) .from(card2, .1, { y: 1000}) .from(card3, .1, { y: 1000}) .from(card4, .1, { y: 1000}) .from(card5, .1, { y: 1000}) .from(card6, .1, { y: 1000})

Hi, I'm using Angular UI-router to build a one-page site with a looping, draggable navigation, and want to use TimelineMax to animate a sprite on the transitions. What I've got so far (see Codepen link) is that when the user drags or swipes the target area, the animation plays or reverses (depending on swipe direction) and the new section loads. So far so good. However, I want the drag/swipe action to actually control the progress of the sprite, so that users can scrub through the timeline. Then, when they release the drag or swipe, the rest of the animation to play and the next page to load. Another thing I've noticed is that once I've swiped through all section of the page and looped back the beginning, the sprite no longer animates - the Timeline just jumps to the next sprite image. If you change direction it then starts working again. Any help greatly appreciated! NB: The individual page content won't load on the Codepen demo, not sure why, but it doesn't matter to the issue I'm trying to resolve here. Cheers.

Hi all! I'm noticing an issue with GSAP merging in transform properties originally formed in the CSS. I've attached a CodePen to show the issue. In Chrome, you'll see that both Dropdowns align to the center as intended. But in Firefox, IE11, and Edge -- it looks like the transform matrix that is generated is not including the calculated width of the dropdown component when transitioning. We can't use fixed widths (in the example that works) for a certain application, and found it really odd that only Chrome and Safari are handling this alright. Let me know if you need anymore info. Thanks as always!

TimelineMax and Bezier plugin have such amazing possibilities, but I am a bit stuck with a few things I don't understand. On this example, The things that don't make sense to me. 1) I did not know how to determine the starting point for the bezier circle. By default, it was starting in the bottom left, and so I rotated the entire svg, and then rotated negatively the play arrow to get it back to a normal starting point. This hack is fine but I am almost 100% sure it is going to cause me issues and may already be. Is there a way to determine the beginning of a bezier curve that allows me to place the object I am rotating around it at a particular starting point? 2) The animation works great if I use TweenMax and just animate it like a normal tween. But when i create it as a TimelineMax animation that occurs on hover it starts way off the bezier curve, I'm assuming it is where it should have started in the first place before i rotated it and all of that. Once you hover over it, it jumps right on the path. Is there a way to snap it to its starting point while TimelineMax is paused? This may be the same question as 1... 3) Is there a way, besides breaking it in 2 bezier curves to have the hover animation stop in the middle of its bezier curve trip? I would prefer to have the animation pause in the middle and then on mouseout, complete the rest of the animation. But I don't see a way to have a bezier animation stop before it gets to the end. Any thoughts would be appreciated!

Hi there, I'm using TimelineMax and getting some great results. I'm getting quite proficient with using the Timeline to animate various elements on the page. I've found a script called Typed.js that I've been able to run independently of the Timeline perfectly but I'm unsure of how to get it to play within the timeline? I know there are some callback features but my Javascript isn't great! http://www.mattboldt.com/demos/typed-js/

I tried to add a border to a banner Ive made, but none of the tries worked i tried .to(type1, .3,{backgroundColor: "#000000", border:"40px #00a1d6 solid"}) I tried with an inset and i get the same effect but I dont want it to be transparent. .to(type1, .3,{backgroundColor: "#000000", box:"inset 0 0 0 7px #00a1d6 solid"}) I like how it looks with the inset but I the only thing about it is the shadow effect and how things can be seen under the inset once the logo passes by. Here is my codepen

Hi there! I have this lovely animation working on every browser, except Safari, and I have no idea why. Am running the latest Timeline Max, jquery, etc. and it just will not cooperate. Am guessing somewhere in the HTML, inconsistent tags? Any help appreciated! <html> <body> <svg id="path_svg" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="1919px" height="498px" viewBox="0 0 1140.059 296" enable-background="new 0 0 1140.059 296" xml:space="preserve"> <path fill="none" stroke="#050101" id="flypath" stroke-miterlimit="10" d="M0,13c0,0,84-16,154,21s145,108,173,125s142,80,316,46 s277-19.173,355,9.913S1140.059,291,1140.059,291" /> </svg> <h1>THIS IS THE HEADING</h1> <img src="https://stage.livetext.com/wp-content/uploads/2017/02/Paper_Plane_Shadow.png" id="paperplane" width="150" /> </body> </html> $(function() { //cache the repeated variables var tl = new TimelineMax({repeat:-1}), plane = $("#paperplane"); var bezierData = MorphSVGPlugin.pathDataToBezier("#flypath"); var bezierDataFiltered = []; var path_width = $("#flypath").outerWidth(); var path_height = $("#flypath").outerHeight(); var path_svg_width = document.getElementById('path_svg').getBBox().width var path_svg_height = document.getElementById('path_svg').getBBox().height; $("#path_svg").hide(); var width_enlargement_factor = path_width/path_svg_width; var height_enlargement_factor = path_height/path_svg_height; console.log ("path_svg_width: ", path_svg_width, "path_width: ", path_width, "enlargement_factor: ", width_enlargement_factor); $.each( bezierData, function( key, value ) { value.x = value.x*width_enlargement_factor; value.y = value.y*height_enlargement_factor; bezierDataFiltered[key] = value; //console.log (value.x); }); function PlaneFly(autoRotate) { // bring playhead back to beginning and clear all tweens tl.progress(0).clear() // set the initial rotation to be close to the direction he's headed in .set(plane, { rotation: 0 }); //console.log (bezierData); //tween added to timeline with the specified bezier paths tl.to(plane, 3.8, { bezier: { type: "cubic", values: bezierDataFiltered, autoRotate: autoRotate } //ease for slip-n-slide-like animation wheeee //ease: Circ.easeInOut }); } setTimeout(function(){ PlaneFly(true); }, 5000); }); h1 { font-size: 250px; margin-top: 200px; text-align: center; } svg { /*display: none;*/ #flypath { } } #paperplane { position: absolute; top: 0px; left: 0px; }

Hello, I have a timeline which makes the first div disappear and, on complete, it plays the timeline on reverse on the second object, so the second appears. In order to prepare the second and third object to play reverse I set them up with a TweenMax.set(). The issue is that once TweenMax.set() runs it kills all timeline actions, i.e. if I play the timeline on those elements it works but it doesn't have any effect on the object. To see what I mean check the codepen and comment the TweenMax.set() on line 32-33 in the javascript panel. PS: the real timeline is very complicated that's why I'd like to play reverse rather then creating another timeline with the opposite actions Thanks in advance

Ok my question is sort of related to this so just put it out there for reference: https://greensock.com/forums/topic/14782-exportimport-timelinestweens-to-json/ I have been using fabric.js with GSAP to create an app to make animations. I have run into a problem where i need to save animation in the db. I am saving my canvas as a JSON. Then the way i went about saving the saving the timeline is by just saving the whole timeline object. I think the saving is working (tell me if I am wrong?) but I think its the fact that the timeline doesn't see the reloaded canvas and its objects as the same. ?? If so what about the ideal solution here. Btw I am very new to GSAP and I am using for my project and love it so far. The fact that I am new I could be missing something very obvious and so far the forums have been helpful with the answers already up and now I am hoping someone can help me with my mine. Thanks in Advance. Regards, Mr P

Hello, I am having a couple of issues, the first being a slight flicker on load of the homepage, before the animation kicks in, it flickers a preview of the page: http://2017.hypemarketing.uk. My second issue is more serious, on my mobile, Android - Chrome V. 56.0.2924.87 the animation seems to lag incredibly, and almost stops my mobile browser working, could someone help me figure out how to make this smooth. Any and all assistance would be greatly appreciated, my code is below. jQuery(document).ready(function($) { // Scroll Magic Controller var frontPageAnim_Controller = new ScrollMagic.Controller(); //Scroll Magic Controller // Animation vars var htmlContainer = $('html'), body = $('body'), viewPort = $(window).height(), // Height of viewport heroSection = $('.hero-section'), panelClickthroughs = $('.panel-clickthroughs'), portfolioPanels = $('.portfolio-panel'), portfolioSection = $('.portfolio-section'), socialSection = $('.social-section'), scrollDown = $('.scroll-down'), scrollDownArrow = $('.scroll-down i') header = $('header'), heroContent = $('.hero-content'), logoContainer = $('.logo-container'), logo = $('#hype-logo'), letter = $('.letter'), letterFill = $('.letter_fill'), logoBorderBottom = CSSRulePlugin.getRule(".logo-container:after"), overlayMenu = $("#overlay-menu"), listItemsOverlay = $("#overlay-menu #primaryMenu ul li"), heroBackground = CSSRulePlugin.getRule(".hero-panel:before"); var fadeSlogan = function () { TweenMax.to(header, 1, { y: 0, autoAlpha: 1 }); TweenMax.to(heroContent, 1, { y: 0, autoAlpha: 1 }); TweenMax.to(scrollDown, 1, { y: 0, autoAlpha: 1 }); }; function urlChecker() { if( window.location.href =="http://2017.hypemarketing.uk/" ) { var otherAnimations = new TimelineMax({ immediateRender: true }); // Start New timeline for all other animations otherAnimations .set(heroBackground, { opacity: 1 }) //has been set in css to remove skip .set(logo, {visibility:"visible"}) .set(letterFill, {visibility:"hidden"}) .set(header, {y: -80, force3D:"auto", autoAlpha: 0, ease: Power2.easeIn }) .set(heroContent, {y: -15, force3D:"auto", autoAlpha: 0, ease: Power2.easeIn }) .set(scrollDown, {y: 30, force3D:"auto", autoAlpha: 0, ease: Power2.easeIn }); } else { //Do nothing } } urlChecker(); // TweenMax Timelines var timelineHero = new TimelineMax({ immediateRender: true }); // Start New timeline for Hero Section & Portfolio var entranceAnim = new TimelineMax({ immediateRender: true }); // Start New timeline for Entrance Anim timelineHero .set(heroSection, { top: 0, position: 'absolute', force3D:"auto" }) .to(heroSection, 0.4, { top: -viewPort, opacity: 0, ease: Power2.easeInOut }); // Animation for timelineHero entranceAnim .set(logoBorderBottom, { ease: Power2.easeOut, force3D:"auto" }) .set(letter, {fill:"none", force3D:"auto", stroke: "00ffbc", strokeWidth: "4", strokeLinecap: "round", strokeLinejoin: "round"}) .fromTo(letter, 3, {drawSVG:0}, {drawSVG:"102%"}, 0) //now animate the logo strokes (note we use "102% as FireFox 34 miscalculates the length of a few strokes) .fromTo(logoBorderBottom, 3, { width: 0 }, { width: 100 + "%" }, 0) //draw out the load under hype .to(letterFill, 1, {autoAlpha:1, ease:Linear.easeNone}) //fade in the real logo and the rest of the text .to(letter, 1, { stroke: "ffffff;", ease:Linear.easeNone }) //fade the stroke to white .to(heroBackground, 3, { opacity: 0.9, ease: Power1.easeIn, onComplete: fadeSlogan }, 0.3); //fade the background // Scroll Magic Scenes var heroAnimation = new ScrollMagic.Scene({ triggerElement: heroSection, triggerHook: 0, duration: 1 }).setPin(heroSection).setTween(timelineHero).addTo(frontPageAnim_Controller); // ScrollMagic Scene for Hero Section var portfolioSectionAnimation = new ScrollMagic.Scene({ duration: viewPort/2 }).setPin('.portfolio-section', { pushFollowers: true }).addTo(frontPageAnim_Controller); // ScrollMagic Scene for Portfolio Section // Scroll Down Button Begin TweenMax.set(scrollDownArrow, { transform: 'translateY(0)' }); TweenMax.to(scrollDownArrow, 1, { autoAlpha: 0, repeat: -1, transform: 'translateY(10px)' }); scrollDown.click(function(){ TweenLite.to(window, 0, {scrollTo:1}); // Scrolls 1px on scroll to initiate the Hero Section sliding out }); // Scroll Down Button End });

Hi all, like the topic already mentions do I have a problem with stuttering animations inside my TimelineMax animation and it would be really great, if somebody of you could help me. I'm currently developing a system for our company in which images and videos of our work can be uploaded/selected with the help of a CMS. These media should be animated afterwards, so that it looks like a dynamic generated showreel. So I used PHP to dynamically generate the JavaScript code and basically it works, but as you can probably see in the Codepen or in the demo, especially in Chrome the animations are stuttering a lot (depending on your computer/device). I have to say that I'm new to Greensock and also not the most experienced developer, so I would appreciate every advice of you. Regarding my code I guess there's a lot of potential for optimization. Especially the way of adding the subtimelines to the maintimeline and calling the functions of the subtimeline is probably wrong. For example: var mainTimeline = new TimelineMax({repeat:-1}); mainTimeline.add(websiteTimeline(website)); function websiteTimeline(website) { MorphSVGPlugin.convertToPath("circle, rect, ellipse, line, polygon, polyline"); // Create sub timeline var timeline = new TimelineMax(); // Add tweens to sub timeline timeline.call(morphToPhone); function morphToPhone() { TweenMax.to("#bezel-macbook", 0.2, {morphSVG:"#bezel-phone"}); TweenMax.to("#camera-macbook", 0.2, {morphSVG:"#camera-phone"}); TweenMax.to("#screen-macbook", 0.2, {morphSVG:"#screen-phone"}); TweenMax.to("#shape-macbook", 0.2, {morphSVG:"#lock-phone", css:{opacity:0}}); TweenMax.to("#line-macbook", 0.2, {morphSVG:"#speaker-phone", css:{opacity:0}}); TweenMax.to("#touchpad-macbook", 0.2, {morphSVG:"#lock-phone"}); } } I also already read about the performance differences between JavaScript and CSS, so my next step would be to use more pure CSS and less TweenMax animations, but I wanted first ask you guys, if you have some better advices for me. I hope anyone of you can help me. Here again the links to my Codepen and demo... Codepen: http://codepen.io/mathis-krueper/pen/ZeQEzZ Demo: http://mathis-krueper.de/captain/references/ Thanks in advance!

Hi guys, I'm trying to capsule a random infinite wiggle effect inside a timeline, so I will be able to easily pause and play it on specific events. This is the first time I use a timeline, so I probably doing something wrong, but I can't figure out why the timeline (named wiggleTween) is not working properly (smooth infinite animation)... Any help will be highly appreciated, thanks ahead! Here's the codepen: http://codepen.io/tushal3/pen/KWpdoV I have used this wiggle example as the base code for the wiggle animation: https://greensock.com/forums/topic/9352-wiggle-effect/ I also used scrollmagic.io for the other timeline (which works, I don't think it has nothing to do with the problem I'm having). Thanks again, Neta

Hello, When dealing with complex looping animations I always use a linear ease. I find it rather cumbersome having to add a ease to each propriety. I know you can set it globally, but then my other timelines get messed up... Seems to be asked often, seems like a logical thing to be able to do. Maybe am looking in the wrong place.

Hi, Trying to wrap the GSAP into a standard interface i bumped into an issue calling .pause() method to several timelines. Please take a look at this fiddle: https://jsfiddle.net/_Ovidiu/x5m690Ld/ 1. From drop-down selelect "Sprite animation" 2. Click "Start Animation" 3. After 3 seconds click "Pause animation" result: The console logs that the timeline is paused but the animation still runs. Please help. Thanks

Hi everyone, Thanks in advance for your help. I've gotten pretty familiar with GSAP/Scroll Magic over the past year or so and have used it on many projects. This is the first time I've been unable to get things working via troubleshooting/docs... so hopefully it's even possible. I'm trying to create an interactive timeline that will trigger new slides whenever you reach the next "period/year". However, the timeline has to remain pinned as you scroll. The functionality isn't quite there yet, but I've added indicators to show the issue I am having. Whenever you scroll it pushes the individual scenes down. Is there anyway around this? What I've tried so far: • Adding two controllers, one for the pinned scene, and another for the individual period scenes. No luck. • Using the "pushFollowers: true" setting on the pinned scene. No luck. • Using start and progress callbacks combined with bloated math programming - but it felt hacky and ultimately will be too hacky for a live production site. Thanks again!

Hello I am new to the forum, I am having issues hiding the SVGs in this pen on load. The timeline repeats itself properly, but I can't seem to execute it properly off the bat. Each SVG is shown until the timelines runs through.

Hello, I have a websocket project I'm working on. When a user joins the site they get a div created for them with an icon as background image. I have a function that runs on DOMContentLoaded that creates fake user divs and wanted to build a timeline of animation moving them around via the X and Y properties in TweenLite. I am really stuck scratching my head - my TimelineMax produces console logs on Update() but nothinggggg moves. I could really appreciate a second pair of eyes! I've distilled the function in question down to a codepen. Thank you in advance! Stephen

Hey there, I'm just getting started with GSAP and so far loving it! But there's one thing I couldn't get figure yet and I can't find any example online: tween repetition inside a timeline without stuck it I mean: var timelineChain1 = new TimelineMax(); timelineChain1.to("#timeline-1 .el", .2, {autoAlpha:1}) /*STEP 1*/ .to("#timeline-1 .el", .2, {scale:.8, repeat:-1, yoyo:true}) /*STEP 2*/ .staggerTo("#timeline-1 .el", .2, {x:-20}, .2 ); /*STEP 3*/ What happens: step 1 runs ok, then the timeline get stuck in the repeatition of step 2, so step 3 never happens. What I want: the infinity repetition to continue as the timeline goes on. Is it possible? Thanks and keep going!

Hello, I'm new with greensock and rails. I found this demo http://codepen.io/GreenSock/pen/yhEmn very fascinating so I want to add it to my project. Then Firstly, I added the .html.erb file.  Then added css to .scss file  Then added js to .js file  added gem to gemfile  added require require/Tweenmax to js require tree  But the web page did't show any animation  Can anybody know how to figure it out? Thanks a lot.