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 en en en zh 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 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 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 en en pt en es en en en nl en de en pt 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
Get updates on the products you use
Learn about exclusive offers and more!
Sign in to follow this   Followers 2
By andrewnelson, February 22, 2018 in GSAP. Views: 3,950
This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax.
The first Scene of the function (scene_in) works fine with the triggerElement set as the selector of the parent function:
But on the second Scene of the function (scene_out) the triggerElement does not seem to work at all:
See the Pen ZrjGVv by anothercreativeltd (@anothercreativeltd) on CodePen
Share on other sites
andrewnelson    5 Likes (Newbie)
Posted February 23, 2018
I found part of the solution.
I was trying to call multiple triggerElement's by just using a single selector. I had to nest another .each() function for each of the   within the original elements function.
The issue now is that those  's are being called from the entire site, instead of just the ones nested in the original function.
('.text-fade-in > ul').each(function(){ var thisSelector = this; var thisLi = $('li', this); var fade_in = new TimelineMax(); fade_in.delay(.45); fade_in.staggerFrom(thisLi, .5, {opacity: 0, top: 14, ease: Sine.easeIn}, .15); var scene_in = new ScrollMagic.Scene({triggerElement: thisSelector, triggerHook: 'onEnter'}) .addIndicators({name:"li_fade"}) .setTween(fade_in) .addTo(controller); $('li').each(function(){ var thisSelector = this; var fade_out = new TimelineMax(); fade_out.to(this, 1, {opacity: 0, top: -10, ease: Sine.easeOut}, 0); var scene_out = new ScrollMagic.Scene({triggerElement: this, triggerHook: 'onLeave', duration: 10}) .addIndicators({name:"li_fade_out"}) .setTween(fade_out) .addTo(controller); }); });
Share on other sites
PointC    14,034 Likes (Superhero)
Posted February 23, 2018
Welcome to the forum and thanks for joining Club GreenSock.
I'm not 100% clear on what you're trying to accomplish here. There are several scripts missing from your demo (ScrollMagic, ScrollMagic Indicators & the GSAP plugin for ScrollMagic). You'll also need to define a controller so the scenes can be added to it.
Here's a fork of your demo with those changes. I just set some other properties so you can see what's happening. It's always easier to debug ScrollMagic using the indicators so I've turned those on as well.
See the Pen EQpVBx by PointC (@PointC) on CodePen
You are running an each() loop on the  , but you only have one   and then another each() on the   tags so I'm a bit confused. What exactly should be happening? It looks to me like you want to stagger each   into view as soon as the   enters the screen and then fade the entire   when it hits the top. Is that accurate?
You can fork my demo and make more changes, but some more info about the desired outcome would be most helpful in getting better answers for you.
Happy tweening and welcome aboard.
Share on other sites
andrewnelson    5 Likes (Newbie)
Posted February 23, 2018
Hello @PointC thanks for the warm welcome!
I appreciate you going through the CodePen and sorting out the missing scripts! I haven't used much of CodePen before so this will be incredibly helpful moving forward.
As for the purpose of the code:
There are multiple   on the page, so calling the TimelineMax for each one.
onEnter, the triggerElement will be the   and then the   will stagger in.
onLeave, each individual   will have an individual triggerElement and the   will fade out to 'opacity: 0' over a duration of 15px
I apologize for the lack of clarity in my explanations and my code, this is all still quite new to me.
Share on other sites
andrewnelson    5 Likes (Newbie)
Posted February 23, 2018 (edited)
I forked and updated your CodePen with the changes I started to make earlier.
It appears to be working as intended but is hard for me to tell because there are no other potentially conflicting elements on the page.
See the Pen ZrjLPP?editors=1010 by anothercreativeltd (@anothercreativeltd) on CodePen
Edited February 23, 2018 by andrewnelson
trying to insert the codepen directly into the post instead of a link
Share on other sites
PointC    14,034 Likes (Superhero)
Posted February 23, 2018
I see - each of the   elements is its own trigger on the way out. That's the part I was misunderstanding on the first demo.
It looks like you have it working now, but if you have more questions or problems when you add new elements, please post an updated demo and we'll do our best to help.
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 2
Go to topic listing
Recently Browsing   0 members
No registered users viewing this page.
Function specific child selectors not working as triggerElement in ScrollMagic / GSAP TimeLineMax
“Truly, you folks on this forum are the nicest, least judgmental, helpful people I've ever encountered.”
“GreenSock has encouraged me to play with the code, to dream up new and exciting things to do.”
“No other animation library is as intuitive, rigorous, conceptually simple and well curated as GreenSock’s.”
“I just tried to animate some objects using vanilla js but it was really laggy- switched to GSAP and now it’s smooth af”
“It's shocking the @w3c didn't use @greensock as a model of how to do animation via code. Did they even ask animators what they use?”
“If every library were as robust and reliable as GreenSock’s, the world would be a much better place for software engineers and their clients. I can't think of a better designed or better performing tool, and as a bonus, it's fun as heck to play with.”
“I think I love GreenSock as much as bacon.”
“I can definitely say ever since I started using GSAP, my work exponentially improved. It basically changed my life.”
“I continue to be astounded by the sheer breadth of what @greensock can do. Every time I'm like "ooh, I wonder if I can do X", it turns out I can!”
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.