Jump to content
Search Community

ScrollTrigger problem on resize/mobile

Freddan test
Moderator Tag

Recommended Posts

Hello everyone,

 

I'm trying to build a scrolling effect by combining many timelines and I noticed an incorrect behaviour on resizing that I could not understand..

In the attached Codepen you can see that if you scroll down the page to the middle of the animation, if you resize the browser, the elements overlap each other when you scroll up again.

 

I developed 2 versions of the JS (First Script, Second Script) and both works the same even if their structure is different.

I apologise if the code is messy but I am not very experienced with ScrollTrigger.

 

I don't know which of the 2 scripts could work better and how o solve the elements overlapping on resize.

 

Any help are more than appreciated

See the Pen rNvdgwK by Freddan3 (@Freddan3) on CodePen

Link to comment
Share on other sites

Welcome to the forums!

 

I don't have time to read through all that code right now, but I'll quickly mention a few things: 

  1. You'll SIGNIFICANTLY increase your chances of getting a solid answer here if you greatly simplify your demo. Maybe just focus on the one part that's not working for you. Eliminate all that extra wrapping JS and instead of having like 12+ tweens/ScrollTriggers, only have 2-4. 
  2. It looks like you're pinning ".vision" and then you're also using that as a trigger for another ScrollTrigger. You may need to use pinnedContainer
  3. Make sure you're creating your ScrollTriggers in the order they'd happen on the page (top to bottom). If not, you should define a refreshPriority so that ScrollTrigger knows the order in which to refresh things. 
  4. This does absolutely nothing: 
    gsap.from(".dot", {
      scrollTrigger: {
        trigger: ".blr_cont_child",
        start: "50% 54%",
        end: "+=250s"
      },
      duration: 0.2,
      ease: "none"
    });

     

  5. I'm not sure what the "s" was intended for in end: "+=250s", but it'll be interpreted as px. Just so you know. 
  6. There's no such thing as mobileResizeRefresh. Maybe you meant to do ScrollTrigger.config({ ignoreMobileResize: true })
Link to comment
Share on other sites

  • 3 weeks later...

Thanks for your welcome @GSAP Helper and for all your support!

I tried to reduce the code to focus on the main problem and to follow your suggestions but unfortunately I have not yet been successful.

I am probably still missing something or I wrote something wrong on the JS.
When I resize the screen, all the text overlap each other and I am struggling to understand where I'm wrong.

I made another CodePen with the simplified version so, maybe it is easier to understand where I'm doing wrong.

See the Pen JjZKVrX by Freddan3 (@Freddan3) on CodePen



Thanks a lot for your support

Link to comment
Share on other sites

Yeah, sorry, it's really hard to understand what you're trying to do, but I'll point out a few more things:

 

scrollTrigger: {
  start: "50% 60%",
  end: "50% 45%",
  immediateRender: true
},

In the above, code, you never defined a trigger. So when you say start: "50% 60%" that's like saying "when the center of the trigger (which isn't defined) reaches 60% down from the top of the viewport". It doesn't make a lot of sense. Same for end. And immediateRender: true is completely unnecessary. In fact, this code does absolutely nothing at all: 

gsap.from(".cont_sq_1", {
  scrollTrigger: {
    start: "50% 60%",
    end: "50% 45%",
    immediateRender: true
  },
  duration: 1,
  ease: "none"
});

This also doesn't make sense: 

pin: ".vision",
pinnedContainer: ".vision",

If you're pinning that element, it can't also be the pinnedContainer (it can't be inside of itself)

 

You don't need to gsap.registerPlugin(ScrollTrigger) a bunch of times. Once at the top is fine. 

 

I strongly recommend just starting with something very basic. Get one part working, then move on to the next part and slowly build it up until it breaks or you get stuck. Then post the minimal demo here with your GSAP-specific question and we'll do our best to help. I just don't understand what you're trying to do and there's a lot of very odd code that's hard to sift through, so simplifying will really help. 

Link to comment
Share on other sites

Thanks @GreenSock for your support and for the pointers you suggested.

 

What I am trying to achieve is a simple succession of text blocks with the full-screen magnification effect of the container div (orange background) occurring between the first and second text block.

 

Following your suggestions I have simplified the code considerably and everything seems to work much more smoothly and without too many errors.
Certainly before there were conflicts caused by repetitions and superfluous code strings.

When I resize the screen the text blocks still overlap, but if you scroll up and down a bit, ScrollTrigger manages to recalculate everything and display it correctly.

 

Is there any way that ScrollTrigger doesn't lose the scroll point of the page so that the text blocks don't overlap or is there still something wrong with my code?

 

See the Pen xxzEWNN by Freddan3 (@Freddan3) on CodePen

 

Thanks a lot for your patience and your support.

Link to comment
Share on other sites

Hi,

 

There are a few issues in your example, I'll try to point out the most relevant of them.

 

You don't need to set pinSpacing: true in ScrollTrigger, that's the default value that tells ScrollTrigger to add that extra space. Also you are setting your end point in a way that will cause problems, since the end point is before the start point, so basically that particular ScrollTrigger instance is completed before it starts:

scrollTrigger: {
  trigger: '.cont_sq_1',
  start: '50% 55%', // Starts when the trigger center hit's 55% of the viewport height
  end: '50% 50%', // Starts when the trigger center hit's 50% of the viewport height
  // 55% of the viewport height is below 50% of the viewport height
  endTrigger: '.cont_sq_2',
  pin: ".vision",
  pinSpacing: true,
  scrub: true,
  markers: false,// on development always use markers true in order to see where your trigger points are
},

Also you are creating a bunch of ScrollTrigger instances to control something that resides in the same parent element that is being pinned, just create one timeline, add all your animations there and tinker with their durations and the end point of the ScrollTrigger instance:

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

 

Finally I advice you to check the documentation on ScrollTrigger and see this video by  @Cassie in order to grasp a better workflow setting up ScrollTrigger animations:

Happy Tweening!

  • Like 1
Link to comment
Share on other sites

Hello @Rodrigo,

 

I could never thank you enough for your detailed reply!

All your suggestions are gold.

 

You're right, I got confused trying to line up several timelines and make them work together.

I thought I had to animate each individual element and then combine them together but, looking at the CodePen you sent me, I realised I was still a long way from such a clean and fluid solution.

Now I understand better how to structure and work with ScrollTrigger for my next Tweens as well.

 

I changed the order of the animations so that:

  • the sliding .dot is visible before the first text block fades out (added delay to the third animation)
  • the full screen magnification effect (orange background) start at the same time as the second text block fades in and it ends with the last text block

I tried to include the Snap function in order to avoid the fading text block to stand overlapped but I got the whole timeline scrolling until the end with no stop.
Do you think it is possible to set it on each text block?

 

snap: { snapTo: [ 0.5 ], duration: 1, delay: 0 },

 

See the Pen yLEVMNj by Freddan3 (@Freddan3) on CodePen

 

In the meantime, I will continue to watch other @Cassie's useful videos and read more documentation on ScrollTrigger.

 

Thanks again for your time and for the support of you all.

 

  • Like 1
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...