Jump to content
GreenSock

iShwaR

Timeline messes up when resizing the window

Recommended Posts

Hi,

I'm fairly new to GS and I'm already loving it. Thanks GS!

 

So, in the demo...
Cards change to a dark green color if they are in focus (basically, 80% width) and scroll when triggered.

Issue 1: If we resize the window (eg: 50% width), we will notice that the animation works but the scroll positions are all messed up, including the background-color. Any idea on what I might be doing wrong? Is this implementation correct?


Issue 2: If I change my (vue) route and come back to this view, I notice the trigger points have moved way down in the doc flow and thus my triggers don't work and the animations also doesn't work. Although, if I resize the window/ refresh the browser - Everything works correctly. 

(I'm finding a bit difficult to demo this issue here)

Kindly help me, I've been searching for a solution for quite some time...

 

Thanks. 

See the Pen YzWBZXo by sharmaishwar (@sharmaishwar) on CodePen

Link to comment
Share on other sites

Hey iShwaR and welcome. Your last post was in 2009. Wow! Welcome back.

 

First off, gsap.ScrollTrigger.refresh() is invalid. If you want to force a refresh you just do ScrollTrigger.refresh(). But you don't need that to fix the first issue.

 

All you need is a functional value for your x property and then make sure invalidateOnRefresh is true in your ScrollTrigger vars. I'm not experienced with Vue so there might be a more Vue-y way to do that, but here's one way to set it up:

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

 

15 hours ago, iShwaR said:

If I change my (vue) route and come back to this view, I notice the trigger points have moved way down in the doc flow and thus my triggers don't work and the animations also doesn't work. Although, if I resize the window/ refresh the browser - Everything works correctly.

Based on that description, you just need to call ScrollTrigger.refresh() when you come back to this view and things have set up again.

  • Like 1
Link to comment
Share on other sites

Hello Zach,

 

Thanks for the reply and let me try the solutions.

 

Also, I've been a religious user of greensock (probably even since before 2009). Although, all of it was in Flash. Since past few years I've moved into web development and I knew, I'd to play with GSAP... and here I'm... 🤟

P.S. Great job with GSAP!! You guys need a special place in the matrix!! 🤘

  • Thanks 1
Link to comment
Share on other sites

Thank you so much Zach!! Both the suggested solutions worked :)

 

Btw, here's the timeline code snippet, I'd request you to suggest better way(s) to write the same... I'm not happy about using fromTo and if I don't, I've to uncomment the .set(...) statements, which again I think is unnecessary. I tried doing a normal

.from(this.$refs.picture2, { opacity: 0 }, "-=0.5");)

But this doesn't seem to animate the .picture2 element (I'm sure there's something that I'm not doing correct)...

 

this.sliderOptionTL = gsap
          .timeline({
            scrollTrigger: {
              trigger: this.sliderContent,
              start: "top 50%",
              // end: "top top",
              toggleActions: "play auto auto reverse",
              // scrub: 1,
              invalidateOnRefresh: true,
              markers: true,
            },
          })
          .set(slides, { clearProps: "all" })
          .to(slides, {
            x: () => {
              return this.sliderContentWidth - this.sliderContentScrollWidth;
            },
            ease: "power1.inOut",
          })
          // .set(this.$refs.card1, { clearProps: "all" })
          // .set(this.$refs.picture1, { clearProps: "all" })
          .to(this.$refs.card1, { opacity: 0.4 }, "-=0.5")
          .to(this.$refs.picture1, { opacity: 0 }, "-=0.5")
          // .set(this.$refs.card2, { clearProps: "all" })
          .fromTo(this.$refs.card2, { opacity: 0.4 }, { opacity: 1 }, "-=0.5")
          // .set(this.$refs.picture2, { clearProps: "all" })
          .fromTo(this.$refs.picture2, { opacity: 0 }, { opacity: 1 }, "-=0.5");

 

Link to comment
Share on other sites

Can you please create a new demo that shows what you have so far so I can try to help you improve it? Guessing how you've set it up is probably not the best way of debugging :) 

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.
×