Jump to content

Search In
  • More options...
Find results that contain...
Find results in...


  • Content Count

  • Joined

  • Last visited

Community Reputation

10 Newbie

About UnioninDesign

  • Rank

Contact Methods

Profile Information

  • Gender
  • Location

Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

  1. Follow up question...how do I capture the instance of the <li> element itself? What I'm trying to do...since these cards showcase quite a bit of data...is to add additional animations to the card or <li> itself if certain conditions are met. The data-attributes method works great for spotting a certain value etc, but then triggering another animation doesn't necessarily make it clear why a burger, or a whale in my case, is flying across the screen? From my research (and errors!) you can't tween a data-attribute, nor is it possible to render a data attribute (lik
  2. HI friends - I noticed a bug and wanted to post a quick update in case anyone is working on a similar project. I never got any errors, but noticed that sometimes my animation would fire when it wasn't supposed to? I have two theories as to why this happened, and wanted to share my fix: From my research debugging this issue, it sounds like data-attributes may not be the most stable? As I am going through the data using .map(), and then checking data-attributes for a certain value....but also repeating my timeline until the next data fetch, I believe the function was being called a
  3. As always - thanks @Rodrigo - works great! Adding the data-attribute to my list items totally makes sense - but glad I made this post, I don't think I would have figured out the 'instance.target.getAttribute' part on my own!
  4. 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/rea
  5. I have a follow-up question, and I've been trolling through the forums and stack overflow in search of a solution that still escapes me at the moment! So...quick recap...I am animating markers on a map of the US, and since there's over 500 an hour, roughly 8,000 a day the stagger methods and TimelineMax have made a very nice visualization - thanks GSAP! -- How to Toggle 'visibility' of tweens throughout the timeline -- The question is that, to avoid showing all of these map markers on render, I've set the CSS for the svg circle element to " visibility: hidden", whi
  6. This was a tricky one for me that took a while to figure out...but Rodrigo was spot on in terms of what the problem was...when fetching data asynchronously, you need to make sure the fetch is complete before attempting to render other components. I was getting an error about 'Can’t call setState (or forceUpdate) on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in the componentWillUnmount method.' In case anyone else is dealing with the same issue - this article here was a huge hel
  7. Thanks Rodrigo! You've got the right idea...and it was getting late...I was missing (duh) the . in front of the className "animateMapMarker" which should have been ".animateMapMarker", like you said GSAP was getting a string for the target and not the element with a className of ".animateMapMarker". And yes, having added the . it kind of works...There's a method in the map library that will move the 'center' of the map and rotate the globe, so I do need to write some more code to get it to a point where, when I call the staggerFrom method, the map markers get bigger (which works) AND that mar
  8. Hello again! I took some time to make a test case to play around with...getting stuck on a few things... Can we talk about use of createRef, callback refs etc? I noticed in the example link you sent, your target looks like this: div className="box" ref={e => this.box = e}> <span> MOVE & ROTATE </span> </div> I tried to replicate something similar, but could be getting stuck with a 3rd party component library so I can play with maps (react-simple-maps, that is...) Here's kicker - I'v
  9. Thanks! For now I just added a simple function to log that the animation is complete, and the animation restarts as expected with no errors (because of the repeat: -1 passed in as params to this.tl = new TimelineMax(....). Always a nice when it's an easy fix! A quick note for posterity...depending on how you do this, especially with react, you may need to add 'this' in front of the onCompleteAll callback. Here's the WALL of code again: onCompleteAll() { console.log("Animation complete"); } updateSlider() { this.setState({ sliderValue: Math.round(this.tl.progres
  10. I'm having the same issue using create-react-app, not sure if I made the same/similar error? I tried to move some things around in my staggerTo methods but still getting the error...any ideas? Not sure if this is a react-thing, or a google chrome thing, but I do suspect a syntax error? Per the timelineMax staggerTo docs, is it necessary to add an onCompleteAll callback, or some way to let the animations know when the animation is complete? I get this error at the end of the timeline, and sometimes during if I scrub too quickly through the timeline. I am using this for a data visua
  11. Just in case anyone reads this and wants to go a little deeper, I have a related question from a few weeks ago, similar use case:
  12. Ah ha - as we say in French - "le mot juste!" Rodrigo you sir are a Wizard! I got pretty close by the end of the day yesterday - I think it came down to missing a 'this' in front of my updateSlider callback! (it's a class...duh...). Now onto the next...I'm in awe of GSAP and the support from its community. There are some very exciting possibilities for making data visualizations here! My apologies again that I have not supplied any codepen or reduced case examples...since this is a worky-thing it's not very public...but I will try to replicate something with a more publ
  13. Quick update...so here's a snip of the callback function: function updateSlider(context) { console.log("State? ", context.state); let currentProg = context.state.value; //context.setState({ value: currentProg + 1 }); context.tl.progress(currentProg / bookingData.length); } And I'm calling it at the timeline declaration at so, which I believe is correct: this.tl = new TimelineMax({ onUpdate: updateSlider, onUpdateParams: "{self}" }); But...because all of the animations live inside componentDidMount(){}, if I pass this in at after the timelin
  14. Rodrigo - the man I was hoping to hear from! I've spent LOTS of time in this forum the past week or so, and your posts are always very helpful! Issue fixed per below! But the next one at the bottom of this post - how do we get the slider to update the position based on the current value of the animation? BTW - Good eye spotting an inconsistency in my code! Easy to do when you try things a bunch of different ways...however, when setting a range of 0 to 100, or 0 to bookingData.length (which indeed gives you a value for how long the dataset is...I'll stick with that!)....the same res
  15. I really appreciate the help on this! I did get the sequence timed out the way I want, but had a follow up questions on callbacks in case either of you two gentleman would like to kick this can a little further down the road? Case: so we're building a map, and using this animation I'll get report every 15 minutes with 100 - 500 bookings to display! Now that I've got a nice stagger effect so you don't see all the bookings rendered simultaneously, I'm noticing that the map starts to get cluttered? I'd like to write some kind of callback (if necessary) to make the bookings fade out a