thomas159

HI @PointC Yes that's correct I'm trying to cycle like a loader, I thought once I was able to get past the initial problem with the repeating loop I would be able to animate them in this way but it proved trickier than I thought. I've switched to using ccs animations as I'm finding it too difficult to get gsap and react to work together well enough ( the codepen example transitions smoothly when looped, but when I use the same code in react I still don't get a smooth transition, it fades out briefly and then back in)

sorry didn't intend to irritate you.... yes the pen of @PointC works for a simplified example...I was just trying to expand on this, anyway I think react adds an extra layer of complexity which I'm not sure will work. Thanks for the help

my understanding was that the tweens are all fired sequencially so here it will fire the first tween then if there was no delay the 2nd tween and then the 3rd all 0.5 seconds apart, what I have done is add the delay to the 2nd and 3rd tween to fire them all at the same time .to("#box", 0.5, { backgroundColor: "#f19939" }) .to("#box2", 0.5, { backgroundColor: "#ff00ff" }, '-=0.5') .to("#box3", 0.5, { backgroundColor: "#ff0000" }, '-=0.5') Once 0.5 seconds has elapsed it should then fire off the second round of tweens that last for a second and again a second delay on the 2nd and 3rd box so these fire at the same time .to("#box", 1, { backgroundColor: "#ff00ff" }) .to("#box2", 1, { backgroundColor: "#ff0000" }, '-=1') .to("#box3", 1, { backgroundColor: "#f19939" }, '-=1') you've suggested that it will look at the tweens for each element and sequentially run these ? .to("#box3", 0.5, { backgroundColor: "#ff0000" }, '-=0.5') // time 0.5 ! .to("#box3", 1, { backgroundColor: "#f19939" }, '-=1') // start time -1 = tween before didn´t finish What i'm trying to achieve is basically having box,box2,box3 all fire at the same time and then again all firing at the same time and then again all firing at the same time, but there's seems to be some slight discrepancy with the delay which I just can't get my head around which is causing box2 and box3 to jerk when repeating the animation

thanks for the tips, I've created a new pen but I'm having an issue with box2 and box3, the first box is seemless, but the other 2 boxes are jumpy when tweening between them. Also as I'm doing this in react and targeting the element via a ref rather than via the css <div className={styles.box} ref={con => {this.box = con; }}/> I am getting the same problem as in my first pen where the animation fades out the back in as it repeats, which doesn't seem to happen when using css class in my second pen example

@Rodrigo that's exactly what I was after, thanks so much for your help!

Hey @PointC thanks for the reply, I did try this, I guess somewhere my delay is causing the issue as yours seems to be seemless, I will give this another go adjusting the delay var tl = new TimelineMax({ repeat: -1 }) tl.to(this.box, 0.5, { css: { backgroundColor:"#F19939" } }, ) .to(this.box2, 0.5, { css: { backgroundColor:"#F19939" } }, "-=0.5") .to(this.box3, 0.5, { css: { backgroundColor: "#F19939" } }, "-=0.5") .to(this.box, 1, { css: { backgroundColor: "#FF00ff" } }) .to(this.box2, 1, { css: { backgroundColor: "#FF00ff" } }, "-=1") .to(this.box3, 1, { css: { backgroundColor:"#Ff00ff" } }, "-=1") .to(this.box, 1, { css: { backgroundColor:"#Fff" } }, ) .to(this.box2, 1, { css: { backgroundColor:"#FFf" } }, "-=1") .to(this.box3, 1, { css: { backgroundColor:"#Fff" } }, "-=1") .to(this.box, 0.5, { css: { backgroundColor:"#F19939" } }, ) .to(this.box2, 0.5, { css: { backgroundColor:"#F19939" } }, "-=0.5") .to(this.box3, 0.5, { css: { backgroundColor: "#F19939" } }, "-=0.5")

HI Rodrigo, I'm looking to do a onetime stagger on each element, having each square fly off every 1/10 second. I tried to do it another way using the code below const data = [ {id:1, name: 'box1'}, {id:2, name:'box2'} ] data.map(item => className={styles.box} ref={con => {item.name = con; }} however I then wasn't sure how to reference this into the timeline tl.to(whatGoesHere??, 0.5, { css: { backgroundColor:"#F19939" } }, ) any suggestions welcomed

Hi, I'm having trouble getting the animation to repeat smoothly without it briefly pausing before the loop. I also need the colours to continually fade into each other as it loops so the last colour should fade into the first colour when the loop repeats but I'm not sure how to achieve this

Hey, I'm trying to integrate gsap with react and have managed to look at a few examples and get a simple tween working, however I'm struggling to work out how to animate all squares in my example and not just the last item. I would the same affect to apply to all squares or someway to target each square. I don't really understand what this does, so if someone could explain? 'ref={ a => {this.name = a }' I have created a codesandbox.io pen as this is alot easier to work with for react than codepen but don't seem to be able to embed it https://codesandbox.io/s/l2w1o9n1p9