Jump to content
Search Community

Leaderboard

Popular Content

Showing content with the highest reputation on 01/19/2019 in all areas

  1. Hi, As JACK explains, multiple stagger timelines can do a great job, especially when combined with the cycle effect. Unfortunately, I did not manage to implement a cycle solution for the lines (hard coded here). Kind regards Mikel
    2 points
  2. Yeah, sorry, I'm a little lost especially without a demo. It kinda sounds like you're asking a data structuring question rather than a GSAP-related one. (?) The solution I gave you actually does seem like it'd accomplish what you're after. But maybe I'm misunderstanding. You need to add another numeric parameter to your staggerFrom() calls (at the end) to control where they start getting inserted into the timeline. Perhaps the stagger amount is "1" (because you wanted 1 second inbetween each individual customer) and then the position parameter for the 2nd staggerFrom() would be something like 0.1, and then the position parameter for the 3rd staggerFrom() might be 0.2. That way, the customer marker animates first, quickly followed by the client marker, and then finally the line...and then it starts again for the next customer marker, and so on. If you still need some help, please provide a reduced case in codepen so we can see what you're working with. The less code the better
    2 points
  3. Thanks I have worked it out by creating two separate timelines repeating and non repeating all good.
    1 point
  4. Here's a few recent of mine... FedEx: http://rabondigital.com/html5/FedEx/index.html GoPro: http://rabondigital.com/html5/gopro/_new/index.html Others: http://rabondigital.com/html5/index.html Enjoy! Ryan
    1 point
  5. Welcome to the forums, @UnioninDesign! If I understand your question/goal correctly, all you'd need to do is add the position parameter to your 2nd and 3rd staggerFrom() calls so that they are positioned in the timeline properly. By default, animations are always sequenced one-after-the-other. So, for example, if you've got 100 elements that each animate for 1 second, but they're staggered by 0.1 seconds, that means that the last one would finish at 11 seconds (0.1 * 100 for the stagger, plus 1 second for the animation itself). So if you do another staggerFrom() call after that, it's gonna start at 11 seconds. But in your case, it sounds like you want that second staggerFrom() to start much earlier. Perhaps 0.2 seconds after the very first stagger. No problem! Just add 0.2 as the position parameter to tell it to start that stagger at exactly 0.2 seconds into the timeline. Done. More about the position parameter: https://greensock.com/position-parameter Another option is to build a function that handles all of the animation for just ONE chunk, and then loop through however many elements you have and feed them to that function which then spits back a TimelineLite which you can nest into a master timeline in a staggered fashion. This is slightly more advanced, but once you get the hang of how to do this kind of thing, it can make your animation code much more intuitive and unencumbered. For more about that, read this article: https://css-tricks.com/writing-smarter-animation-code/ Happy tweening!
    1 point
  6. I just want to mention that if you're looking to create AMPHTML banners, TweenUI now supports exporting amp ads. So there's actually a way to use Greensock to build amp ads - since TweenUI itself is built on GSAP (but the amp banners do not have any GSAP in them).
    1 point
  7. If you still need a unique timeline for each slide, here's a fork of the example I posted earlier in the thread. You can see that I created an array of timelines and manually created one for each article. That is then added on to the end of the animation timeline created each time you click a tab. I also modified the tab indicator a bit to make it into a popper instead of a bubble slider. This one gets a bit bigger so it will look best on CodePen in full page mode. https://codepen.io/PointC/pen/VEaYjb Hopefully that gives you some ideas. Happy tweening.
    1 point
  8. Hey @smallio We haven't seen you in a few weeks. Coincidentally, I just made a demo for another thread that does what you need here. (I think it's what you need anyway). https://codepen.io/PointC/pen/rZZGRj Does that help or am I misunderstanding the desired outcome here? Happy tweening.
    1 point
×
×
  • Create New...