en en en en en en en en en en en en en en en en en en fa en en fr hbs_lat en en en es en en en ms en de en fr en en en ca en en en en en en en en ms en en en en de en fr en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en pl en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en ms en en fr en en en hu en en en pt en hu en en en it en en en en en en en en en fr cv es tr es en en en en ms en en en en en en fr en hbs_lat en en en en en en en fr cv es tr es en en en en de en en en ca en en en en en
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?
(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...
See the Pen YzWBZXo by sharmaishwar (@sharmaishwar) on CodePen
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.
Share on other sites
iShwaR    1 Likes (Newbie)
Posted November 14, 2020
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!! 🤘
Share on other sites
iShwaR    1 Likes (Newbie)
Posted November 14, 2020
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");
Share on other sites
ZachSaucier    7,086 Likes (Superhero)
Posted November 16, 2020
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
Share on other sites
Create an account or sign in to comment
You need to be a member in order to leave a comment
Sign up for a new account in our community. It's easy!
Register a new account
Already have an account? Sign in here.
Sign in to follow this   Followers 1
Go to topic listing
Recently Browsing   0 members
No registered users viewing this page.
Timeline messes up when resizing the window
“I will never say it enough but @greensock you are absolutely amazing and you have no idea how much time and brain cells I have spared thanks to you 🥰”
“Really quite impressed with @GreenSock JS - even the small things.”
“Spent today converting an animation to pure CSS, and then into GSAP. GreenSock was an order of magnitude easier. Love it.”
“@greensock is just pure awesomeness. What more can be said?”
“I just tried to animate some objects using vanilla js but it was really laggy- switched to GSAP and now it’s smooth af”
“GSAP hosts what is in my experience, the most welcoming, patient and helpful support forum I've ever come across. I've yet to see a question flat out ignored and the patience you all have in putting people on the right track, if not flat out solve their p”
“No other animation library is as intuitive, rigorous, conceptually simple and well curated as GreenSock’s.”
“+1 to GreenSock. It’s just one of the deepest and most reliable javascript libraries I’ve ever used”
“GSAP is awesome - I just dropped all my [custom] code, like a thousand lines of code and everything is so so much simpler, smoother and much easier to read for other developers! You have no idea how cool it is to offload that thought process to you guys!”
Sign Up For Our Newsletter
Get the latest updates on GreenSock products, exclusive offers, and more right in your inbox.
Your information will always be kept confidential.
Thanks for signing up!
Now you'll begin receiving the latest GreenSock updates, exclusive offers, and more right in your inbox. Welcome aboard.