Jump to content
Search Community

Complete GSAP beginner question about basic tweening and scrolltrigger

Kent Pilkington test
Moderator Tag

Recommended Posts

So, here's a code block. #Dog exists (surprise, it's an illustration of a dog!), and it is in a section with an ID.

I've tried several things I've seen in GSAP and scrolltrigger videos to just move the dog (transform: translate()), but the ONLY thing I was able to get working is to have it call jQuery to add a class which calls a pre-defined CSS animation.

 

It almost has to be something dead simple that I'm just not seeing, so any insight would be appreciated. Well, except telling me to just use an IntersectionObserver instead or something like that. Even if it's not the most amazingly appropriate use of GSAP (I think it is?), I'm far more interested in why it isn't working, than whether I should be questioning my life choices. :-)

 

        gsap.registerPlugin(ScrollTrigger);
        jQuery('#Dog').each(function(index, element){
            var sectionID = jQuery('#Dog').parents('section').attr('id');
            console.log('sectionID='+sectionID);
            gsap.to('#Dog', {
                x: '-50%', // <-- appears to have no effect - may just not be valid input
                y: '-50%', // <-- appears to have no effect - may just not be valid input
                xPercent: -50, // <-- appears to have no effect - saw this on a video
                yPercent: -50, // <-- appears to have no effect - saw this on a video
                toggleClass: 'play', // <-- appears to have no effect
                scrollTrigger: {
                    trigger: sectionID,
                    start: "center 75%",
                    toggleClass: 'play', // <-- appears to have no effect
                    toggleClass: {targets: sectionID, className: 'play'}, // <-- appears to have no effect
                    onEnter: ()=>{
                        console.log('Dog entered');
                        jQuery('#Dog').addClass('play'); // <-- ONLY this appears to work
                    },
                },
            });
        });

 

Link to comment
Share on other sites

Hi and welcome to the GreenSock forums,

 

In cases like this it really helps to provide a minimal demo as the code you displayed only tells a portion of the story. It's nice to see all the things you've tried, but if you are combining them all at once it's likely some techniques may cancel out others making it very hard for us to know what is causing the issue. Also mixing css animations and gsap is bad practice and can further complicate how your code is being executed. 

 

I'm curious why you are using a jQuery each loop on #Dog.

An element with an ID should exist only once which means there really shouldn't be anything to loop through. 

If you have multiple #Dog elements this certainly could be causing a problem.

 

I would strongly suggest getting this to work on a single dog first before you worry about looping and creating multiple animations for multiple sections.

 

to make things easier for you below is a very bare bones demo that shows a single tween being played when the #dogContainer's center passes the center of the viewport for the first time.

 

See the Pen ExEqOVK by snorkltv (@snorkltv) on CodePen

 

Feel free to fork the demo and add your html, css, and javascript. The demo already loads GSAP, ScrollTrigger and jQuery.

 

Once you get your dog moving OR we see a minimal demo of what you've tried then we can move forward and tackle individual issues / features.

 

 

  • Like 4
Link to comment
Share on other sites

The reason for the loop is literally, "It was late and I was very tired." I'm having to do a last minute replacement of AOS with GSAP for the scroll triggers before something goes live at the end of the week, and it was a quick cut and paste from something that I knew was otherwise working, but was searching for a class rather than an ID. My focus was not on elegance or efficiency or clean code, but on getting the GSAP trigger to to literally give me any sign of life - that I was even on the right track.

 

The value schemes were each tried one at a time with all other variations commented out. I uncommented them here to avoid someone pointing out that they weren't working because they were commented out. Lol. I guess that backfired. :-) 


My hope was that I was simply overlooking something simple and probably obvious to someone who's been doing it longer than a few minutes. I was under the impression that adding a value for x (x: '-50%') that value would get popped into a transform: translateX. This appears to be the case in your example, but doesn't appear to happen in mine, but I'm not sure why the results are different.

 

Is there perhaps additional initialization or presets that Codepen puts in place for you?

Are there key factors that GSAP relies upon that are not explicitly specified in the Codepen?

Am I missing something about how toggleClass works? (I was assuming it would just ... well, toggle the presence of the class name on the target of the .to() operation.)

Does the value for x : need to be quoted? I've seen examples of both being used - quoted and not quoted.

 

Again, based on the simplicity of your sample and the fact that it is working, it's almost certainly something dead simple that I'm just overlooking, or perhaps some assumed requirement in how GSAP is loaded/initialized? I don't know. I'm just guessing at possible explanations. 

Link to comment
Share on other sites

It's pretty tough to troubleshoot without a minimal demo - the issue could be caused by CSS, markup, a third party library, your browser, an external script that's totally unrelated to GSAP, etc. Would you please provide a very simple CodePen or CodeSandbox that demonstrates the issue? 

 

Please don't include your whole project. Just some colored <div> elements and the GSAP code is best (avoid frameworks if possible). See if you can recreate the issue with as few dependancies as possible. If not, incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, then at least we have a reduced test case which greatly increases your chances of getting a relevant answer.

 

Here's a starter CodePen that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo

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

 

If you're using something like React/Next/Nuxt/Gatsby or some other framework, you may find CodeSandbox easier to use. 

 

As for needing to put quotes around x values, no, you don't need them unless you're using a unit other than px. Any numeric value is assumed to be pixels. Otherwise, you could do something like "50vw" and that should work just fine. 

 

No, CodePen doesn't add any kind of presets/settings for GSAP. Not at all. No, there are no "key factors that GSAP relies upon that are not explicitly specified in the Codepen".

 

There's no such thing as "toggleClass" on a tween. That's a ScrollTrigger feature, so you'd put that in the ScrollTrigger object to have it toggle a class while that ScrollTrigger is active. 

 

Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. 

 

Good luck with your project!

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