nico fonseca

Hi @ThePixelPixie ,

First I updated Gsap to v3,  is something like this what you are looking for ?
You can use the play() and pause() methods from the timeline 🙂


See the Pen f714c682920afc466a72bc904dc78855 by nicofonseca (@nicofonseca) on CodePen

Hey @Samuele ! You can use ScrollTrigger.matchMedia() to detect the viewport change. The matchMedia has a return function to run the code when you leave the current viewport.


See the Pen b991c7897a354e2e5eb20ea84543aab6 by nicofonseca (@nicofonseca) on CodePen

Hey @Christopher Evans
Something like this ?
 
const itemRef = useRef<HTMLDivElement>(null); const tl: any = useRef(); useEffect(() => { tl.current = gsap.to(itemRef.current, { scale: 1.05, paused: true }); }, []); const onEnter = (ref: MutableRefObject<HTMLDivElement | null>) => { tl.current.play(); }; const onLeave = (ref: MutableRefObject<HTMLDivElement | null>) => { tl.current.reverse(); };
Sorry for the "any", I'm not TS expert. I think @OSUblake is the best for this 😅

 

As @GreenSock said if you set gsap.config({force3D:true }) and add on the headline:
 
gsap.set('.banner-big__headline',{ y:0, }) every works fine 🎉
 
One curious thing is that if don't add anything and remove the overflow:hidden to banner-big, everything works normal 🤷‍♂️
Welcome to the new Internet Explore 😂

@pixelarchitect 
 
Just in case you are not aware: when you have a child with position absolute, the father needs to have position relative or fixed, otherwise the child will position itself in relation with the first father it finds with the needed positions or with the body, like in this case. Also, when you have an element with position absolute you need to set its top and left as 0 in order to force those x/y coordinates on the browser.

On the other hand, now your coordinates will be related to its container so you need to calculate the top value in relation with the base top of the container.


See the Pen 2b1d32aaa2e551b0930725caec23381b by nicofonseca (@nicofonseca) on CodePen

Hi @whizzbbig , welcome to the forum 💚 
I downloaded your code and I found the issue. You forgot to change the duration values on the imagestrip.js
For example, in old gsap versions you wrote something like this:
TweenMax.to(element,1,{...}) But now it has to be:
gsap.to(element,{ duration:1, ... }) So you only need to change that
PS: I attached the new js file where I changed it in some places so now it works, but you still need to replace it on other places.
 
imagestrip.js

Hi @mlikaon, the issue is because you used negative z-index + transform property. You can see more here. 
I updated your demo with some changes. 


See the Pen b80cc306613c11d0c5fb07c3c891c756 by nicofonseca (@nicofonseca) on CodePen


Cheers.
 

Hey @zozo ! Here is the thread with the same problem: 


See the Pen 1fb50e40f6c086568e3d2585799175e6 by nicofonseca (@nicofonseca) on CodePen
.  🤘

Hi @BrianT 
The problem is that Vue only accesses the ref properties after the element is rendered.
 
Hope this can help you
https://codesandbox.io/s/musing-hodgkin-xww5z?file=/src/views/Home.vue

Cheers.
Nico.