[Webpack + gsap error]

Upgrading to Webpack 2.2 from Webpack 1 and found the same issue. Thanks for sharing the fix @Torrfura

[How to import Easing package correctly when using ES6?]

In my previous projects, I'm loading TimelineLite, TweenLite & the CSSPlugin from cdnjs through a <script> tag; Let's say I'm was using webpack. If I import these in the entry js file, would it load all the goodies and would that work? I'll test it.

[How to import Easing package correctly when using ES6?]

Hi,

I'd like to know how to import the Easing package when using ES6? Or any other for that matter.

At the moment I noticed that even though I did not import easing, it's available when importing TweenLite. So, I'd like to understand what I'm importing and when I have to import (a package, or the need to be specific).
 

import { TweenLite } from "gsap";
TweenLite.fromTo(this.refs.logo, 0.8, { opacity: 0, x: 50 }, { opacity: 1, x: 0, ease: Bounce.easeOut })

[How to play to X time ?]

I think your solution works, sorry had to reply quickly in the console so just did a quick test, need to check it properly

TweenLite.fromTo(myTimeline, 1, { time:0 }, { time: 0.5, onComplete: function () { myTimeline.pause() } })

Did a few more tests in the console and seems to be a good solution, here's the tested code:
 

TweenLite.fromTo(myTimeline, 1, { time: myTimeline.progress() }, { time: 1, onComplete: function () { myTimeline.pause() } })

[How to play to X time ?]

@diaco thanks for replying!

I had to edit my question, noticed I didn't mention Timeline.

Ideally to work with a timeline, because I'm starting by declaring the animation, then depending on the user action I'd like to show the animation.
Let's say, that the user is selecting a size and there's an object that will animate according to the user input value / preferred size.

What I usually do is using the requestion animation frame and controlling the transition or input value in the call .progress(), so I can see it animating in any direction.

Do you know if there's a way to do it with a timeline? I guess that your solution can work for me, but I'd have to declare it everytime
 

[How to play to X time ?]

Hi

 

I'm wondering if there's a way to play to a given X time (timeline) ?

The only way I see I can accomplish this, is by using request animation frame and call the progress method.

I found about .gotoAndStop() but it's similar to seek and it doesn't play the animation until X value (jumps straight to X point)

I'm now going to try to see at what time the animation is and for each step check if it's X time and stop or pause the animation.

But would be much easier to have something like playTo (0 start 0.5 middle and 1 end)

Any hint is appreciated!



 

[For rotations, how to keep element centred on window resize?]

Thanks guys!

So embarassing, I've failed testing this, I was sure centring margin 0 auto didn't work for some reason.

[For rotations, how to keep element centred on window resize?]

Hi,

Using GSAP TimelineMax for a 360 rotate loop animation; On window resize, I can't seem to keep the element centred;  I've got a live link here

If the page is refreshed, the instance when initialised at that point, has the element aligned properly. Only on window is resized, it breaks;

So, I've tried to use the method "kill()" and also setAttribute style and removed any css styles from there; create a new instance, but it breaks, making the animation super slow;

 

I wonder if there's a solution for this. Any tip is appreciated! Thanks!

See the Pen wGBBmm by helderoliveira (@helderoliveira) on CodePen