en en en en en en en en en en en en en en en en fa en en fr hbs_lat en en en es en en en ms en de en fr en en en ca en en en en en en en tr en en tr en en en en en en en en fr en en en en en fa en en en en en en fi hbs_lat en en en en en en en en en de es en en en en en en sv fr de de fr fr en en en en en en en en fr en en en en en en en en en en en de en en en en en en en en en en en en en en en en de en en en en en en en fr en en en en en en en en en en fr en en en en en en en en en en en en en fr en en en en en en en de en en en en en en en de en en en en en en en en en en en en en en en en de en en en en en en en en en en en en en de en en en en en en en en en en en de en en en en en en en en en en de en en en en en en en en en en en de en en en en en en en en de en en en en en en en en en en de en en en en en en en en sv en en en en en en de en en en en en en en en en en en en en en en fr en en en en en en en en de en en en en en en fr en en en en en en en en en en en en en en en en en en en en en en en sv en en en en en en en en en en en en en en en en en en fr en en en en en ru en sv en en sv fr de de fr fr en en en en tr en pl en it en en en en en es en en en en en de en lt en en en en en en en fr cv es tr es en en en en ms en en en en en en fr en hbs_lat en en en en en en en fr cv es tr es en en en en de en en en ca en en en en en
When something doesn't work check developer console by hitting F12 to see if you are getting any errors. Your demo was missing jQuery, you can add that from codepen settings.
Feel free to post GSAP related questions.
Reverse() TimelineMax not working when reusing the timeline inside a function with parameters
It is still not clear what you are trying to do. But it feels like what you want is, if you click on new box old one should hide the content, Correct?
See the Pen eJONMN?editors=0010 by osublake (@osublake) on CodePen
You can check rest of the demos by @OSUblake in following thread,
Alternate solution would to use fromTo tweens, with immediateRender disabled on all tweens except first one. And setting duration on your scenes, you will notice jumps because your element animates 400 pixels but you are scrolling only 300 pixels.
See the Pen BGVKdG by Sahil89 (@Sahil89) on CodePen
When you define a to tween, GSAP will animate element from current position to the target position, so when you scroll and refresh all wrong values get recorded and create conflict.
When you define from tween, GSAP will animate from given position to current position. But by default immediateRender is set to true so GSAP will set your element in that position that's why you need to set it to false on 2nd and 3rd tween.
You just need to pause the timeline so it won't autoplay and get in the way. Does that help?
See the Pen VVxBRZ?editors=0010 by Sahil89 (@Sahil89) on CodePen
Those values get passed as string. You need to create JSON string and parse it.
const from = JSON.parse(el.dataset.from); const to = JSON.parse(el.dataset.to);
Double quotes are important, if you don't want to use quotes, you will find some stack overflow threads with regex solutions. You can also encode JSON string from server in PHP, there will be equivalent solutions for other languages.
You need to create paused timeline outside of events so you can play and reverse it on mouseenter and mouseleave.
See the Pen VVQGgQ?editors=1010 by Sahil89 (@Sahil89) on CodePen
The ripple effect is SVG filters, feTurbulence specifically,
Posted November 21, 2018
5 minutes ago, elegantseagulls said:
Sahil, your CodePens are amazing, inspiring, and very easy to follow, just wanted to give you an extra thanks!
Glad you found it inspiring, most credit goes to @OSUblake and the book I mentioned. I started participating in forum with the intentions of learning from him, it has been great experience so far. I see that you are being active recently as well, great job! Hope to see you continue do so.
Custom Ease vs Bezier vs Bigger Timeline Performance Question
Posted November 21, 2018
That's close but in your case you are not using different strokes so you can do everything in render function to optimize further.
TweenLite.ticker.addEventListener("tick", render); function render(event) { ctx.clearRect(0, 0, canvas.width, canvas.height); // set style and beginPath for (let i = 0; i < lines.length; i++) { // call draw function of prototype but don't stroke in prototype // to avoid stroke calls because you are not using different strokes // or draw lines here directly if you are sure you won't need to make changes // like randomizing stroke etc } ctx.stroke(); }
Animation not updating on resize
Posted November 21, 2018
I have linked some threads below but looking at your animation I don't think you need to do that. Just hide the content of your container and scale it instead of changing height/width. Once animation is done make your content visible. If scaling doesn't work for you then you will need to write responsive tweens, check following threads.
You need to re-create tween/timeline to adapt to new values. There are few methods to do that like reconstructing timelines, using modifiersPlugin and using invalidate().
In your case if you want to use invalidate you will need to use fromTo tweens for tweens that you want to update.
Another thread discussing same ideas,
Posted November 21, 2018
I don't think there is any performance difference just both are applicable in different scenarios. You must be familiar with requestAnimationFrame, that gets called when browser is ready to render. So internally GSAP relies on rAF in browsers that support it otherwise falls back to setTimeout.
Ticker's tick event occurs each time GSAP's engine updates and onUpdate gets called when particular tween/timeline updates. In your case we suggested you to use ticker(or you can use requestAnimationFrame) so you can avoid 100 clearRect calls and call it just once on entire canvas. Same goes for draw calls. Plus ticker made more sense because your canvas was updating on every frame. Instead if you had 4-5 tweens that won't repeat then using ticker won't be good idea because once animations complete you are executing those statements unnecessarily .
In most cases when you are dealing with canvas, you will want to use ticker. With DOM you might want to use ticker in situations where you are adding some easing effect like mouse follow effect etc.
Plus using ticker has some benefits over rAF, like you can easily add or remove event handler, pass paremeters or set scope. A lot more flexible.
See the Pen ?editors=1010 by Sahil89 (@Sahil89) on CodePen
Rollercoaster movement along a path
Posted November 20, 2018
You can study @OSUblake's demos from following thread on how to speed up and slow down based on path.
You can set viewport based on current x translate of car to create camera like effect of following. You can get x position of car using car._gsTransform.x. But make sure the initial position of car is at 0, 0 in your SVG so you won't need to do additional calculations to get exact position of car.
There is another advance demo by Blake, I don't think you need that but here is the link,
Custom Ease vs Bezier vs Bigger Timeline Performance Question
Posted November 20, 2018
Ya moving all draw calls to single place would be better for performance. As you are using same stroke, you can construct path in loop and stroke it just once. Also use clearRect on entire canvas because everything is updating on every frame.
As for coding style, I would have used prototype maybe, because that's how I learned to do using Foundation HTML5 Animation book. You will find it useful if you plan to do more stuff with canvas.
Timeline and button issues
Posted November 19, 2018
Your spans have white background so they weren't disappearing just you couldn't see them. toggle-btn had typo in css so it wasn't getting position fixed.
The menu is visible on mobile because you were animating to -100% but your element had height 100vh, so it would stay in viewport because whatever '100%' is, it was less than 100vh.
You should avoid animating height, width, top, left etc because they trigger layout repaint, animate transforms instead whenever possible because they take advantage of GPU and perform better. So your animation can be achieved animating yPercent instead of top. You can learn more about animating transforms, https://greensock.com/docs/Plugins/CSSPlugin
See the Pen yQzjVa?editors=0110 by Sahil89 (@Sahil89) on CodePen
callback.call is not a function
Posted November 14, 2018
Your sixth parameter should be function, in your snippet it is seventh. I think you accidentally wrote position parameter twice.
const heroTimeline = new TimelineLite({delay:'1'}); heroTimeline .add('start') .staggerTo([stage1_h1, stage1_h2], 1, {opacity:1}, 0.25, 0, stage2);
Delay for fade in and separate delay for fade out
Posted November 13, 2018
That's really well written actually.
To set delay before text fades out again, you can set repeatDelay property. You are setting delay in both from and to values but it will ignore delay in 'from' values.
See the Pen zMNZoO?editors=0010 by Sahil89 (@Sahil89) on CodePen
On codepen you don't have to write entire HTML, you can add your scripts from settings and just write HTML body in codepen, rest is not needed.
Dynamically update, same speed
Posted November 13, 2018
Since the master is not a 'normal' timeline, an overlap of tweens (before, behind) with the move timeline is not feasible (pause is pause!).
If you think about it, what you are trying to do is to create timeline for user interaction. Your character is free to move around so you can't put him in timeline. Instead you should treat it as interaction. When he reaches certain spot then trigger animation related to that position. Timeline is not best option for this.
Block Reveal Effect with GreenSock
Posted November 12, 2018
With all that I forgot to implement main effect of revealing text.
Stopping an animation between two labels
Posted November 12, 2018
Does Tween1Tl.seek("startLabel").pause(); work for you? If not, would be great if you can post a demo.
Dynamically update, same speed
Posted November 12, 2018
Happy to help! Here is less complex solution using invalidate. Instead of using another object, I am animating element directly. On resize, activeTween gets invalidated to record new values. I have left some comments for key parts but this is far less complex and better for performance because we are not creating new set tween on every frame.
See the Pen KrNPem?editors=0010 by Sahil89 (@Sahil89) on CodePen
onComplete fires before tween ends completely
Posted November 12, 2018
Hard to guess what could be happening in your actual code. And it is impossible for onComplete to fire before tween completes, unless you are using stagger tween. In stagger tweens, onComplete gets fired for every single tween. You need to pass 5th parameter as function for onCompleteAll callback.
Apart from that it is impossible for us to help without demo showing problem. But I am sure there must be something else in your code that must be causing this issue.
onComplete fires before tween ends completely
Posted November 12, 2018
Your snippet is fine. Can you post a reduced test case showing the problem?
Block Reveal Effect with GreenSock
Posted November 11, 2018
23 minutes ago, Rodrigo said:
The only thing I'd change is using the ref callback instead of reaching to the DOM directly. So instead of this:
I tried that actually but stackblitz was giving me weird highlights throughout the code and grayed out ref attribute when I used it on those elements, so I assumed ref will work on parent node only inside loop. Still overall I am impressed stackblitz just hope code highlighting won't be issue locally.
Dynamically update, same speed
Posted November 11, 2018
That's tricky mainly because you want to change the duration of the tweens but changing duration of tweens that are on active timeline create weird effect because you are stretching timeline's duration so it just stretches from same start position. You can't add these tweens to any timeline, only thing you can do is change timescale of whatever that timeline is but still going to be tricky situation if it is complex animation.
Here is a bit more simplified demo,
now instead of animating element I am animating another object between 0 to 1.  Because animating actual element gets too tricky.
And then using the onUpdate call to update position of element.
When move function is called I am creating new tween and assigning it to currentTween variable.
I am using another variable, currentVars. To record start and end position that I need to create new tween on resize.
onResize if currentTween is actually active, then kill currentTween. Then call move function to create new tween.
See the Pen GwjGVZ?editors=0010 by Sahil89 (@Sahil89) on CodePen
See if this works for you, I am not sure if there is better way but if I come up with something then I will let you know.
Separate TimelineMax tweens on a timeline with Scrollmagic Pin
Posted November 11, 2018
48 minutes ago, rcneil said:
Can I chain TweenMax "fromTo", though?  Like this?
Yes but you probably don't need to if you can structure your columns differently. In following demo I am animating containers so you won't have to write same tweens again and again to achieve that effect, or use a loop? Would be a lot easy for you to edit in future. Also, if you want to translate element in percentage then you can instead use yPercent.
See the Pen aQmjYb?editors=0110 by Sahil89 (@Sahil89) on CodePen
48 minutes ago, rcneil said:
They still run one after another...
That's because your columns animate within a second but your quotes animate over six seconds. So when you scroll, all slides animate first then rest of quote tweens start playing because one's duration is 1 second and another's is 6. You can either construct your timelines with same duration or explicitly set one timeline's duration to another.
See the Pen rQMrrE?editors=0010 by Sahil89 (@Sahil89) on CodePen
Separate TimelineMax tweens on a timeline with Scrollmagic Pin
Posted November 11, 2018
You can create two timelines then add them to master timeline at position 0.
master.add(tl1, 0); master.add(tl2, 0);
Page 2 of 39
“GSAP is just miles and miles ahead of any animation library out there. Great work!”
“The best thing about GSAP is that it just works, and it works well. On every single browser I’ve tested.”
“@greensock is just pure awesomeness. What more can be said?”
“No other animation library is as intuitive, rigorous, conceptually simple and well curated as GreenSock’s.”
“I’ve long felt like GSAP is the best kept secret in JavaScript.”
“GSAP and CSS Transitions: I've done both, and its like comparing an F16 to a horse. Take like 10 minutes to try.”
“Really quite impressed with @GreenSock JS - even the small things.”
“There is no doubt that GreenSock is currently the best available tool for creating astonishing interactive websites and animation effects.”
“GSAP, the rolls-royce of JS animation frameworks. Still going strong!”
Sign Up For Our Newsletter
Get the latest updates on GreenSock products, exclusive offers, and more right in your inbox.
Your information will always be kept confidential.
Thanks for signing up!
Now you'll begin receiving the latest GreenSock updates, exclusive offers, and more right in your inbox. Welcome aboard.