Leaderboard

It is extreme in the sense that you will be styling the tag in the most specific manner possible. Depending on the size of your project and the number of people involved in it, you don't want that sort of specificy as it makes overriding the style very cumbersome. A less extreme version of this is to have a <style> tag inside your HTML with the desired visibility rule targeting the necessary wrapper tag. Another step up from the extreme is the external <link> to a stylesheet but making sure it gets parsed before the HTML. By the way, well done on your discovery. I find it super satisfying when I am stuck on a problem and eventually I figure out the solution.

I'm on a phone riding a train, so, much limited on resources here. Giving a total shot in the dark as I've not even seen your code. Your CSS is somewhere that is taking a moment to load. During that moment your content is showing. The more extreme solution here is to add a inline style to your wrapper tag and set it's visibility to hidden (which is better than display:none for a few reasons). That will guarantee the visibility being parsed before the wrapper tag is rendered. GSAP should then, be able to pick it from there and make your life easy. ;) As for your aside, I am not sure what you are asking or what you have done. The safe bet here is to have the CDN link pointing to TweenMax as it will cover the majority of the tweenies needs cases. The kilobytes you save by trying to only load the lite versions is so minimal that is not worth the trouble (plus, puling one TweenMax bundle is better than three or four separate lite bundles from the CDN).

Hi RolandSoos, I can't go over all of your issues in one go (my lunch break is only so long) Ops, someone got carried away and is being naughty at work... Problem #1, you said yourself, you are turnning off the supressEvent thus, whenever resolve#2 is clicked, the virtual playhead jumps from the second addPause() all the way back to time 0, passing over the first addPause(), triggering its callback. If you leave the suppressEvent turned on, you will have the behaviour you expect. Pause 1 -> Pause 3 -> Pause 1 -> Pause 3 etc... Problem #2, as you know, the addPause is a "zero duration" tween. So, you are adding two pauses on top of each other at the exact same timestamp. But, when the playhead hits that timestamp, GSAP only fires the first callback as it is based on a onComplete callback. The second addPause() never gets a change to run. When the user clicks on resolve #1, the playhead moves from that timestamp but the second callback is not fired because the it sits at the exact timestamp so, on the next GSAP tick, the playhead has moved away from it so, the onComplete call does not fire. If you were to add the second addPause with a miniscule offset, for example "+=0.01", it will fire when clicking on resolve #2. This example also has the supressEvents issue as responded above. So, you will need to adjust accordingly. Problem #3 builds on top of the concepts of Problem #2, the addPause is sitting at time 0 but it never runs because the timeline is already set to paused. Given that it never runs, the .then() part of the promise never gets initialized and thus, everything else falls apart. The workaround is the same as before, have the addPause() sit sligthly offset from 0, say 0.001, and things should work as you expect. Problem #4, is regarding the supressEvent, that you are disabling. Again, the addPause works off a onComplete call. The callback is firing in this case because you are removing the supression of events when the playhead is scrubbing around, not playing. When you set the timeline to play from 'test' onwards, you're scrubbing the timeline from 0 past the addPause() and then, GSAP starts playing from the label. The callback is fired because no events were supressed. Problem #5 is on the same vein as #4, where you are turning off the supression of events and scrubbing the timeline over those events thus firing them. Ultimately, the behaviour is as expected, but only IF you understand the callback in addPause() happens during a onComplete(), you cannot stack several of those on top of each other as only the first one will fire. You also need to have in mind the concept of "tick" in GSAP, where certain things happen at one "tick", then the playhead moves to another time position before the other "tick" running. Hopefully, this helps clear out your questions and you will be able to adjust the code to suit your needs.

I found a way to use GSAP to React with Next.js without a problem. You can load GSAP components in componentDidMount() method of your React Class. Like this: componentDidMount(){ const GSAP = require('gsap'); const { TweenMax, TimelineLite, Power4 } = GSAP; TweenMax.to(el, 1, { top: -100 }); } There is an easy reason for problems like this in Next.js. Next.js is an SSR library and GSAP is a Client Side library. When You import GSAP in the top of your project, it throws an error because GSAP can't access to Window object in JS. But, when you require it in your componentDidMount(), it will require after the page loaded and it will access to Window object in js. Hope it will help you all.

With a little more research I've found out why the Lite versions weren't working, i think i'd need the CSS plugin as well, the Max version includes it. (the post i read this on was a little dated) Initially making the wrapper hidden, then visible is working better than what I had, but I must ask, why would you consider this an "extreme" solution? What would a less extreme solution be? I also realized in my JS I was setting the wrapper to display: "initial", but in the CSS .wrapper's display:none was commented out.. oops.. ?

We really try to keep these forums focused on GSAP-specific questions if at all possible because we just don't have the resources to provide free general animation consulting services, but it's okay to post a question here as long as you adjust your expectations (you might not get an answer). We do encourage the community to chime in and share knowledge and we want this to be a welcome place for all...we just try to manage expectations. Our goal is to underpromise and overdeliver

@Hossein Rahimi that works like a charm , thanks for the explanation. Also, using the first hack, changing line 515 did the trick too: _doc = _gsScope.document || {createElement: function() {return _dummyElement;}},

That works great. Thanks for your help! Good to know that about fromTo().

Hi @namisuki, another year, another try ... Happy folding ... Mikel

This is no animation. This is a still frame from a 5,5 hour long animation I am currently building with all kinds of variations of the Greensock logo. Be patient. It will probably be finished in december 2039! I'll post a follow up in this thread when it's finished. Crazy particles will be in it! For now, the best for everybody for twenty ninetween! May all your wishes come true, you all have a great timeline this year! Love & Ease!

Hi @namisuki, This is a quick fork of my last pen on this subject. The conditions are not completely correct (1st picture twice ??). For the second run and the following, the backface-visibility has to be 'repaired'. See you next year ... Mikel Problems solved - already this year.

c`mon guys i'm still seeing some updates and receiving notifications. Don't sit in-front of your computer today. Have some fun, drink, talk to your love ones & chill. Happy New Year! See you next year! Thank you for GSTeam. ❤️

For those that care or might find a need for this like I did....after digging into the documentation, I found that I could mix transformMatrix and shortRotation. TweenMax.set( mcTimelineCircle, { transformMatrix:{ shortRotation: targetAngle }}); When placed inside of an Event.ENTER_FRAME, I was able to take advantage of the smooth rotation as well as avoiding the crazy jumping that was happening as Flash was tweening from -179 to 180. Which is what it does by default if you do a trace of a movieclip's rotation as it does a 360-degree rotation.

Hi, In the last 12 months, I learned some JS / JQUERY. But there is still a long way to go ... At the end of the year a parallable.hitTest to present a little wisdom. Happy tweening in 2019 Mikel

DING DING! We have a winner. ? For those that don't get it, it's not an arrow, but a decrement and a greater-than symbol sitting next to each other without a space. So it's really this. while (x-- > 0) { } Some programmers use the arrow to show what the value is going to, which does make sense once you understand its meaning. So x goes to 5. while (x --> 5) { } In languages like C++, you can do some even weirder things, like chaining the increment/decrement operator together. This will decrement by 2. while (0 <---- x) { } Decrement by 10 while (0 <-------------------- x) { } Decrement by 10 with Lazers. Pew Pew!!! while (0 > - - - - - -- -- -- -- -- ---------- x) { } And the most important one, x slides to 0. Wheeee!!! while (x --\ \ \ \ > 0); Demo http://coliru.stacked-crooked.com/a/4109c1dbf6b4f294

Hi @OSUblake, Instead of MDN lessons I try to find examples here in the forum. I'm pretty sure I found this syntax in an example from GREENSOCK. By the way: "The usage of --> has historical relevance. Decrementing was (and still is in some cases), faster than incrementing on the x86 architecture. Using --> suggests that x is going to 0, and appeals to those with mathematical backgrounds." Best regards Mikel

Happy New Year @mikel It's a never-ending journey, isn't it? I'm sure we'll all continue to learn cool things in 2019 by hanging around the GreenSock neighborhood. Keep up the great work.