[CDN links broken]

It isn't members only. I just copied link from docs, it works.

 

https://cdnjs.cloudflare.com/ajax/libs/gsap/3.0.1/gsap.min.js

[Zoom map region to the center of the map container]

You need to determine how far object is from center based on SVG's internal coordinate system then animate it. There is a bit of learning curve, you can refer to discussions in these threads,

 

 

 

Also, please avoid tagging anybody in questions as we usually read all the questions.

[Zero duration tweens at start are skipped if timeline is repeated]

@GreenSock now it doesn't skip zero duration tweens but still skips call method.

[Zero duration tweens at start are skipped if timeline is repeated]

Hi,

 

Just came across this odd behavior which didn't happen in gsap 2. If you click on buttons as follows, T1, T2, T1, T2 then you will notice that element's opacity just stays 0.1 and it also skips any calls at the start of timeline. The initial value does get recorded if I am resetting it somewhere in play head of timeline, uncomment line 38.

 

Only workaround that seem to work is setting everything in onStart, a bit inconvenient but is that intended change? Release notes don't suggest using onStart to set values for repeating tweens.

See the Pen PowYrEM?editors=0011 by Sahil89 (@Sahil89) on CodePen

[Page size increases after animation completes]

@Shrug ¯\_(ツ)_/¯ I wasn't aware of that, thanks! It means alot . I don't remember ever helping you but glad my posts helped you.

[Page size increases after animation completes]

You need to wrap the element in some container with desired height and use wrapper as trigger.  In this case I am using another wrapper to keep set overflow on visible elements. Hiding overflow in some way will prevent page height from growing. You can tweak everything to get desired result.

 

See the Pen oNNOLZb?editors=0010 by Sahil89 (@Sahil89) on CodePen

[Start animation at the end of a section slide]

You need to user horizontal scrolling for this, so you can trigger animations just as you do while vertical scrolling. Check out all other examples on that site, it has demo for almost everything.

 

http://scrollmagic.io/examples/basic/going_horizontal.html

 

If you don't want to use horizontal scrolling then you can use intersection observer API to trigger animations,

 

https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API

[Objects, coordinates and paths]

4 hours ago, denken said:

3) And finally, after a while the browser begins to slow down due to the number of paths.... 

 

What you are trying to do is more suitable for canvas. It seems you are creating really long paths, which gets overwhelming for browser.

 

It can be achieved using 2 canvas stacked on top of each other as layers. Draw your lines on bottom layer with lineCap set to round. And draw your circles on top layer. This way you won't be drawing too many paths unnecessarily.

[Mouse scrolling is not working]

You are using HTTP links on HTTPS site so they are getting blocked. Change your cdnjs urls to https.

 

Quote

Mixed Content: The page at 'https://www.m1xchange.com/' was loaded over HTTPS, but requested an insecure script 'http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js'. This request has been blocked; the content must be served over HTTPS.

 

Also note that you are using 'latest' link that actually points to really old version of GSAP. Latest version is 2.0.2.

 

https://cdnjs.com/libraries/gsap

[(Help Needed) SVG Multiple Path Morphing]

That tutorial doesn't apply to what you are trying to do. You will need to morph multiple shapes, and you will need to animate fill color as well based on what are you morphing into.

 

Take a look at demo by @PointC,

 

See the Pen mmMXQK?editors=0110 by PointC (@PointC) on CodePen

 

This tutorial will help you write timelines using functions,

 

https://css-tricks.com/writing-smarter-animation-code/

[How do we achieve stop() function in GSAP similar to the jQuery?]

When you define a from tween, GSAP will set your element to that position and animate back to original position. So for example if your element is at 0 and you create a from tween with value of 100, GSAP will set your element to 100 and animate back to 0. If while creating the tween if element was at 50, then GSAP will animate from 100 to 50. If it was already at 100, then nothing will happen because start and end positions are same.

 

I removed each because it was unnecessary. You can still use each and it will work.

 

Also, with GSAP you don't need anything like jQuery's stop. GSAP overwrites any tweens for same property of the element by default. You can change the overwrite behavior if you ever need, check the docs. https://greensock.com/docs/TweenLite

 

You can visit the learning page and youtube channel to get familiar with GSAP API,

 

https://greensock.com/learning

 

https://www.youtube.com/user/GreenSockLearning

[How do we achieve stop() function in GSAP similar to the jQuery?]

Problem is you are using a from tween, so as soon as you hover your element jumps to 10 pixels and animates back to 0. Also, you were using timeline and adding all those tweens to it even though you won't be reusing them.

 

See the Pen mQKRPo?editors=1010 by Sahil89 (@Sahil89) on CodePen

 

 

[Issue on javascript selector to GSAP]

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,

 

 

 

[ScrollMagic + GSAP Issue]

I think issue has to do with ScrollMagic and how it handles tweens that are animating same property that conflicts. ScrollMagic is not GSAP product, you should try posting issue on Github. https://github.com/janpaepke/ScrollMagic

 

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

 

A better solution would be to use enter/leave events to create new 'to' tweens inside the event handler so there won't be conflicts.

 

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.

 

 

[Defining start situation]

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

 

[Gsap values/props from data-attribute?]

Those values get passed as string. You need to create JSON string and parse it.

 

<div data-from='{"yPercent": "0", "rotation": "0"}' data-to='{"yPercent": "-100", "rotation": "5", "ease": "Expo.easeOut"}'>

 

  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.

[issues reversing tween]

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

 

For gooey effect you need to use blur and contrast trick, check this https://www.youtube.com/watch?v=ZDFwBEXN0pM

 

The ripple effect is SVG filters, feTurbulence specifically,

https://developer.mozilla.org/en-US/docs/Web/SVG/Element/filter

https://developer.mozilla.org/en-US/docs/Web/SVG/Element/feTurbulence

 

[onUpdate vs Ticker]

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]

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]

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().

 

https://greensock.com/docs/TweenLite/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,

 

 

 

[onUpdate vs Ticker]

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]

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]

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.

 

https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Optimizing_canvas

 

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]

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