Jump to content
Search Community

Reveal animations based on scroll direction - ScrollTrigger

newyorker test
Moderator Tag

Recommended Posts

Hi everyone, 

 

I'm trying to use the animations on this demo for my website. But i've noticed a little bug, on desktop everything works perfectly, but on mobile 

doesn't seem to be working properly. On mobile animations play smoothly when they are shown for the first time on the page,

but onEnterBack:() animations doesn't seem to be hidden, and they are replayed as they come back to view again, causing a glitchy, flashing effect. I wasn't sure if the problem was in my code, or the browsers I've tested on. So i went on to https://greensock.com/gsap/ on my mobile device which is using a very similar animation, and the same thing appears on the website as well.

 

I've managed the reveal from left, and right effect without a problem using:

gsap.registerPlugin(ScrollTrigger);
let imagesLeft = gsap.utils.toArray('.fromLeft'); 

 imagesLeft.forEach((item, index) => { 
 let timeLine = gsap.timeline({
   scrollTrigger:{
     trigger: item,
     toggleActions: "play reverse play reverse"
   }
 });
 timeLine.from(item, {
   x: -100,
   opacity: 0,
   duration: 1
 });

});

let imagesRight = gsap.utils.toArray('.fromRight'); 

 imagesRight.forEach((item, index) => { 
 let timeLine = gsap.timeline({
   scrollTrigger:{
     trigger: item,
     toggleActions: "play reverse play reverse"
   }
 });
 timeLine.from(item, {
   x: 100,
   opacity: 0,
   duration: 1
 });

});

which works perfectly on mobile as well. But i couldn't achieve the effect used on the texts, and the headers where they appear depending on the scroll direction. 

 

I was hoping if someone could help me out solving this problem so the text, and header animations work properly on mobile devices?

 

Thank you. 

See the Pen pojzxwZ by GreenSock (@GreenSock) on CodePen

Link to comment
Share on other sites

It's really difficult for me to reproduce, but are you saying that the elements appear in their native position only for a brief moment when scrolled back into view, I think that may have to do with the fact that there's a transition value defined in the CSS. It's like some mobile browsers handle that in an odd way. I updated the CodePen - does it work any better for you? I also added will-change: transform, opacity just for kicks :) 

  • Like 2
Link to comment
Share on other sites

You've described the issue way better than i did, sorry for the poor explanation, i'm still learning. :) I was really excited when i saw will-change: transform, opacity but unfortunately i still get the same problem with the updated code. I've tested it on both safari, and chrome on mobile,  so I think it's an issue with mobile browsers like you said. 

Link to comment
Share on other sites

18 hours ago, newyorker said:

unfortunately i still get the same problem with the updated code.

Are you absolutely positive that you removed all "transition" properties from the CSS? That seemed to be the culprit for me. But again, it was very difficult for me to reproduce. 

Link to comment
Share on other sites

Yes, i've removed them all. I also tried taking all the code from Codepen, and run it on a separate workspace to see if the issue was due to the code in my project, but i still get the same problem. If you seem to make it work, then maybe it's me thats doing something wrong with the implementation. 

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...