[Different scrollbars for same width containers (Scrolltrigger)]

1 hour ago, akapowl said:

the pinSpacing will then make it scrollable for you

 

I was totally missing that part, thanks for highlighting this.

Amazing solution, especially the third scrollTrigger that was very insightful. ScrollTrigger is a powerful tool but it takes some getting used to it.
 

[Different scrollbars for same width containers (Scrolltrigger)]

Really appreciate this detailed explanation it really helped out immensely!
I guess the only thing that is still unclear to me is how exactly `end` works, I mean according to docs when setting the end to `bottom right` should align the end of the animation with the end of the scrollbar right? So that would make it not scroll at all (which is the requirement here), and even if I set it to 4000px (which is larger than the scrollbar) it still scrolls when the scrub reaches towards the end.
On my example by omitting `end` the Draw SVG did draw without scrolling at the end but still unsure why this happens.

[Different scrollbars for same width containers (Scrolltrigger)]

@ZachSaucierI understand I was just wondering why would the ScrollTrigger set on two containers with the same width would show two different scrollbars and thus being out of sync with one another.
 

[Different scrollbars for same width containers (Scrolltrigger)]

Hello long time since I posted here.

 

I'm trying to align a drawpath svg (which is working nicely with Scrolltrigger) with a simple timeline animation (the line increasing in width) but since the timeline can be larger than the viewport I thought I could add it in a container with the same width as the drawpath svg container (3000px) but they seem to have different scrollbar width and so they don't sync correctly. Any ideas are appreciated!

See the Pen rNMxLvL by 7linternational (@7linternational) on CodePen

[Greensock in Flutter]

Thanks for the fast response! I completely understand and thanks for all the good work your do for the JS world!

[Greensock in Flutter]

Hello all, long time since I posted here. So its 2020 now and wanted to check if there were any plans for Flutter greensock now or near future, since Flutter is picking up very fast now.

 

Thanks all!

[What plugin to use for SVG Path animation]

Thanks that's what I was looking for!

[What plugin to use for SVG Path animation]

Hello, what plugin should I use to mimic the functionality of this codepen: 

If someone could also showcase how to animate the SVG Path with a GSAP plugin, I would be grateful.

 

Thanks.

See the Pen zGKBGm by elevaunt (@elevaunt) on CodePen

[Change tween duration while its tweening]

Yes greatly, the 

.duration()

 get/set is really useful!

[Change tween duration while its tweening]

If you know only this part I'm good to go: 

 

 

Can I also get the current speed?

[Change tween duration while its tweening]

Yes exactly something like this.

Can I also get the current speed? so I can gradually decrease it? 

 

This is for a loader which I'm not sure when it will finish, so I want to keep making it go slower so it doesn't end, and when it is complete to bump it to the end.

[Change tween duration while its tweening]

Hey guys, long time since I've been here.

 

How can I change the duration of a tween while it is tweening? So I have this:

 

 TweenMax.to(".masked", 10, {"background-position": "0px 100%"});

And I want while this is playing, to dynamically increase the duration of it, or lessen it.

See the Pen jmNQBp by netgfx (@netgfx) on CodePen

[Apple Swift: it's time to start thinking about a Greensock Tweening Framework for it!]

Sincerely I'have tried almost every swift animation library out there. I really home Greensock decides to port to Swift, I know my company would buy it for sure, since we are 4 developers that really struggle with animations on Swift.

 

*fingers crossed!*

[My animation not work in iphone 4]

It seems to work on chrome emulator, what seems to be the problem? Doesn't start? Some animation doesn't fire or out of sync?

[scrollToPlugin is buggy on Safari]

Have you tried to include the autoKill: false property to see if this behaviour is due to something else messing with the scroll?

[Material Design Animation]

Interesting, thanks for sharing that. I would be interested in others opinions also, this isn't so much a question but rather an engagement for ideas.

[Material Design Animation]

Hello,

 

I just wanted to ask a few opinions about the material design animations/easings.

 

Which ease offered by GSAP you think matches their example here: http://www.google.com/design/spec/animation/authentic-motion.html#authentic-motion-mass-weight

 

Also which techninques/plugins of GSAP could be used to create material desing based elements/componenets.

 

Looking forward to your responses.

[Building a responsive full width slider (carousel)?]

It is not extremely difficult to achieve something like this.

 

You could try and attach some logic into the resize event.

$(window).resize(function(){
   // resize container here
});

Then for the slider you could setup your animation to animate left/right according to the full-width of the browser. Like follows:

// sliding right to left
function slideNext(){
   TweenMax.to(container, 1, {marginLeft: "-="+$(window).innerWidth()});
}

// sliding left to right
function slidePrev(){
   TweenMax.to(container, 1, {marginLeft: "+="+$(window).innerWidth()});
}

*Provided that the "containers" inside the main slider span for the full browser width.

[Types of Animations Desired for Tuts+ TimelineMax Series.]

I would think that you could do some tutorials based on difficulty from absolute beginning to extremely advanced. That way you could reach an increased amount of audience.

 

Personally the only thing that I still find difficult to master is Bezier tweening (for some reason).

[Fade in on scroll]

You can capture the scroll event with:

$(window).scroll(function (e) {
var $top = $(window).scrollTop(); // how many pixels scrolled from top
});

 And then do some calculations and apply a tween

TweenLite.to(".obj", 0.5,{autoAlpha:0});

And the reverse of that, if you need to fade-in when the user scrolls back again.

 

But if you are looking for some more complex animations I would suggest: http://janpaepke.github.io/ScrollMagic/

 

Which uses GSAP at its core and gives access to many cool effects that are based on scrolling.

[Using DrawSVG Plugin]

Hello and welcome to Greensock forum,

 

You can read a very basic implementation of the DrawSVG plugin in a tutorial I wrote, it is very basic but I think it is a good place to start, it also includes a codepen post that you can fork and experiment upon that.

 

You can find it here: http://nightlycoding.com/index.php/2014/12/simple-svg-animation-with-greensock-drawsvg-plugin/

[TimeLine Max particles]

Here's an old particle animation with many small canvases.

 

See the Pen FpiJw by netgfx (@netgfx) on CodePen

 

And an old blog post I had written: http://nightlycoding.com/index.php/2013/10/particles-with-kineticjs-and-collision-detection/

[a flash bulb transition effect]

Yes you could also add a stagger animation to have the light-on to last a bit longer and the light-off to go with a slight delay

[a flash bulb transition effect]

You could use an image of the flash and animate it from 0 opacity to 1, along with some exponential easing and then hide it right away.

[DrawSVGPlugin - CodePen StarterKit]

You can also check out my tutorial here: http://nightlycoding.com/index.php/2014/12/simple-svg-animation-with-greensock-drawsvg-plugin/

 

It is pretty basic but I hope it helps you somehow.