Jump to content

Search the Community

Showing results for tags 'conditional'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • GreenSock Forums
    • GSAP
    • Banner Animation
    • Jobs & Freelance
  • Flash / ActionScript Archive
    • GSAP (Flash)
    • Loading (Flash)
    • TransformManager (Flash)

Product Groups

  • Club GreenSock
  • TransformManager
  • Supercharge


There are no results to display.

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start



Personal Website



Company Website



Found 4 results

  1. Hi team! I've been struggling for a while to get some conditional logic in place with my animations. Some quick backstory to give my codepen some context...Anyone who's curious can also see my two other threads, all related to the same project, but I thought I would make a new one with a greatly reduced example. There are LOTS of other questions about animating list items, but not many with react? And none that I've seen that involve potentially large amounts of data, or conditional logic mixed into the timeline? Backstory: I've built an interactive USA map using D3/react-simple-maps, it shows all of my companies bookings on a 5 minute delay...usually close to 50 at a time...100-150 an hour, about 8,000 in a day! That's a lot dots to show on a map! Thanks GSAP for your awesome timeline and stagger methods to make it more digestible. So...enter the 'ticker'... I decided in addition to the map I would add a sidebar that has a card with data on each booking, like who it is, the dollar amount etc. These cards appear in the ticker at the same time dots appear on the map. Now that we're live, everyone wants new features. "Wouldn't it be cool if there was a booking over a certain dollar amount, we could show a whale fly across the screen?" How do I that???? A couple of things, then some code! - Because these ticker cards contain lots of data, I do want them to pause in place for long enough that someone could read them if they wanted...after digging through forums and lots of codepen examples, the best I could come up with was multiple staggerFromTos chained together! It's pretty choppy but it works...ish. The one that is live has better timing than the the codepen! Also - no map in this example - just list items...and a cheeseburger callback! - I've been playing around with .add and .call, or adding a label somewhere to my timeline - not quite there yet! - Nothing I've done actually considers the data! In my codepen, I've created an array with id, and values, and I'm hoping if a card reaches the top of the box (or anywhere in the box) and has a value greater than 10, it will call the cheesburger animation to do its thing? Any ideas? what am I doing wrong? Where should this conditional logic live - within the function, or outside of the timeline somewhere...possible in componentDidMount or DidUpdate? - I'm still getting the hang of react and its ways...but our best practice is to use keys when going through an array with the .map() method, and use createRefs to set targets for the animation. Is there a way I can access a particular card by it's key or ref etc? https://stackblitz.com/edit/react-iiesig?embed=1&file=index.js Thanks!
  2. Hello, I have been using GreenSock tools for a few months now, but I am hitting a bit of a wall with timelines that I don't know how to overcome. I have successfully created 4 animated timelines that individually run when I call a start() function, e.g. TL1.start(), TL2.start(), etc. I now want to create a conditional timeline that plays one to four of the other timelines depending on an argument in the super-timeline's function, e.g. : function superTimeline() { this.superTL = new TimeLineMax(); // code code code this.start( number) { var number = number this.superTL.add(TL1.start, 0); if ( number > 1 ) { this.superTL.add(TL2.start, 2); } if ( number > 2 ) { this.superTL.add(TL3.start, 4); } etc... this.superTL.restart(true, false); } } My problem is that the super timeline is not even calling the first, non-conditional timeline function (TL1.start). Can someone please tell me what I'm doing wrong? Cheers, GR
  3. Hi everyone, as I get better in GSAP, my needs also increase and everyone on the forums have been very helpful. What I want to do is, check for a condition, lets say if element.length > 0, and add tween inside the timeline. What is the best way of doing this?
  4. Hi Everybody, Can you share your approaches for conditionally disabling tweenlite/tweenmax tweens? For example, I have some divs sliding in from the left on a desktop site, but for a width less than 720px i'd like to disable the animation. Any example code, ideas would be very helpful. Thanks!