ebinabo

@Shrug ¯\_(ツ)_/¯ alright, could you let me know how it can be used in this case?

Ideally the first image should go right under the next one after it goes out of view. This might be better with images that are longer than the wrapper actually?

Hello everyone, I'm trying to achieve the same effect as seen here https://codepen.io/a-trost/pen/ba262dac3da9d7f47b81e2adb7fa0fd3 Doesn't seem to be working properly. I also tried setting the y value back to 0 in the tl

@OSUblake it just might be, I'll try that

You might want to put this in a codesandbox since you can't put in in a codepen, so it's easier to read. However, using a useEffect hook and the refs as dependencies should work just fine. useEffect(() => { // insert tweenmax code here }, [arrayOfRefs]) You might also want to pass in refs like <div ref={el => ref = el}> {...} </div> // then you can access referenced elements as ref instead of ref.current

You could make a few copies of the tree and move the nodes inwards to the different growth stages you require and then copy all those paths into an array and animate with morphSVG plugin which would be the best bet. It's for club greensock members tho. Otherwise you could animate with the CSSPlugin, starting from the smallest svg gsap.to('.firstSVG', {attr: {path: [arrayContainingPaths]}}) which is a lot less efficient.

Trying to make a custom cursor and when I move the mouse fast, parts of the element gets chopped off. Would there be anyway to stop this. I'm doing this in react and decided to try it on a vanilla environment and it's having the same results

@ZachSaucier thank you so much. I just learnt that you could tl.add(anotherTl) lol and that's so cool! Now I'm gonna take it to the next level!

The carousel switches the images properly but there seems to be a jank in the animation when it restarts. Opening dev tools, it shows that the opacity changes from 0 to 1 immediately instead of transitioning like the others.

Not sure how to link multiple pages in a codepen but here's how I think this could be implemented in v2 `done` is a function that's returned when the current action is complete so it's called after the tl is played and reversed. next.container ensures the animation doesn't reverse until the page that's being transitioned to is available Hope this helps const timeline = gsap.timeline({paused: true}) timeline.to('.cover', {left: '100%', ease: 'power2.out'}) barba.init({ transitions: [ { leave: () => { var done = this.async() timeline.play().then(() => done()) }, enter: ({next}) => { var done = this.async() next.container && timeline.reverse().then(() => done()) } } ] })

@dotun12 I would recommend using the v2 barbajs api as it's much more straight forward. However, I noticed there was no onComplete function in your fadeOut tween so the tween plays but the new page is not pushed out of the history object so it stays the same

@mikel this works fine actually, thank you

@ZachSaucier hello Zach, I'm trying to display only the white boxes and drag through them in a shelf effect. I don't want the black background to be visible only as margins and not a large portion of it

Hey @Mikel, I tried this and it didn't work, immediately you add for both directions the right boundary stops working