Jump to content
Search Community

Make character look the other way on reverse

thatkookooguy test
Moderator Tag

Warning: Please note

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. 

Recommended Posts

Hi everybody,

 

I'll start by saying that Greensock is amazing and I love it :-)

Also, great forum! Already found a few solutions by going through some of the threads here.

 

I'm trying to make a character walk on a path when the page scroll reach certain points.

After a few tries, I went forward with the following solution:

 

1. animate the character on each path using top left with percentage so that the horizontal roads can be responsive

2. this way, I can create the entire animation from the start, and just forward the animation to the correct position (or even backwards)

3. potentially, I can make the animation slower of faster to make the character walk faster (this will effect both the sprite animation and the walking)

 

Now, I'm at a point were the basics work. the character follows your scroll (it feels as if he's trying to catch up with you).

Later, I'll add more points across the path to make him walk shorter distances

 

Now, i'm having problems with 3 more things I want to accomplish:

1. make him go faster for bigger distances (if you scroll super fast, he should speed up the animation up to a certain max)

2. try and make the tweenTo function start at the same speed as the current speed (but still speed up and slow down overhaul if that's possible)

3. change the direction of the sprite. currently, on reverse(), the character just walks backwards. I want a way to change the sprite's background position to a "up walk" and "left walk" to make it better. Can this be done only by creating two different animations?

 

I would really appreciate any help trying to fix those problems. I'm kind of stuck at this point, reading all the docs I can find :-) 

See the Pen 867e1eaa715df246eae50e805fa0a38f?editors=1010 by neilkalman (@neilkalman) on CodePen

Link to comment
Share on other sites

Hello @thatkookooguy and welcome to the GreenSock Forum!

 

My example below only shows your character facing backwards when scrolled up but not left to right, since i didn't have time to do the reverse backwards for side to side. ;)

 

Looks like you would need to add a class that places the CSS background-position-y at the value of 40px. So this way it displays the sprite image in a backwards state.

 

If it was me i would add a new CSS rule like this that just handles the character to face up when scrolling up (so his back is facing you as he walks up):

#char1.backwards,
#char3.backwards,
#char5.backwards{
    background-position-y: 40px !important;
}

Notice i added !important declaration, that makes sure the background-position-y is always 40px for your image sprite to dispaly back of character. This way you would add the .backwards class when your character is getting scrolled up and is supposed to be walking up the page. So you would add that class when he walks up, then remove when he is walking from left or right. And add back again when he is moving up with the scroll-bar.

 

Then binding an event to the mouse scroll wheel, detect if the scroll bar is going up or down. Then add the class .backwards to those 3 elements (#char1.backwards, #char3.backwards, #char5.backwards).

 

But checking the scroll direction should probably be done with ScrollMagic enter event and check the event.scrollDirection for reverse (scroll up) or forward (scroll down). Since mousewhell can be buggy.

 

Then you just need to detect two things on whether you add the .backwards class

  • detect when scroll-bar is scrolling up
  • and if your character is supposed to be walking facing up (you can mimic what i did for facing up for when you nee to face the character left or right)

 

So this can be done with a simple add and remove of a CSS class and event binding for mousewheel or using ScrollMagic enter or update event to detect scrolling up and down.

 

But others might have a better way of adding and removing the class either in the tweens and timeline or via scrolMagic event.

 

Happy Tweening! :)

 

 

  • Like 3
Link to comment
Share on other sites

Hi @Jonathan! thanks for the quick reply :-)

 

I wasn't able to see your codepen work (for some reason I don't see the changes), BUT you did gave me a good idea to separate the background-position-x and background-position-y. That worked perfectly for reversing the sprite.

 

Also, I ended up calculating the direction based on getting the current time in seconds (anim.duration() * anim.progress()) and checking it against the destination.

 

I used the same technique to speed the animation up if the destination is far away (more than 1 point away)

 

I think it looks pretty good!

If anybody has any more ideas on how to make this better, I'll appreciate the feedback :-)

 

thanks!

 

 

Link to comment
Share on other sites

@thatkookooguy Glad you figured it out!

 

One thing you should do is use the GSAP set() method instead of the to() tween with a zero duration. The GSAP set() method is basically a zero based tween, so you wont have to use a to() tween with duration 0.  ;)

 

GSAP set(): https://greensock.com/docs/TimelineMax/set()

 

So you should change this for all tweens with a zero duration, for example change this:

 

anim.to('.character#char1', 0, {
    opacity: 0
}, 2);

anim.to('.character#char2', 0, {
    opacity: 1
}, 2);

 

Into this using set()

 

anim.set('.character#char1', {
    opacity: 0
}, 2);

anim.set('.character#char2', {
    opacity: 1
}, 2);

 

Other than that great job.. but where is Luigi? :)

Link to comment
Share on other sites

@Jonathan oh cool! I used to with a duration of 0 because I thought set always happens at the start. good to know you can do that in a middle of an animation

 

 

I tested this out and it seems to work as intended everywhere besides Safari (on mobile and probably on OS X as well).

 

The character runs to the end of the path immediately on load even though you can only see the first mark on the viewport.

 

Not sure if it's a problem with Greensock or ScrollMagic (or maybe something in my code). I'll investigate that more, but if someone has any leads (since I don't have an iPhone or a mac :-)), it would be greatly appreciated :-)

  • Like 1
Link to comment
Share on other sites

Hello again @thatkookooguy

 

I would think it is ScrollMagic that is triggering your character to run at the end of the path immediately. Since your GSAP timeline has paused: true, and ScrollMagic is what is controlling the timeline with scroll events.

 

You could try a couple of things and see if it helps :ph34r:

 

1) You could try and wrap all your code inside a DOMContentLoaded event and a window load event so this way your code wont run until the DOM is ready and the window is fully loaded. Something like this:

 

// wait until DOM is ready
document.addEventListener("DOMContentLoaded", function(event) {
  
  window.addEventListener("load", function(){
    
      // place your code here
    
  });
  
});

 

2) Since you are using a from tween, in your case a fromTo() tween. You could add the special property immediateRender: false to your fromTo() tweens vars parameter, to make sure that the tween isnt run immediately. That is because from tweens by default have immediateRender set to true. But again ScrollMagic is controlling the tweens so that is what is handling running the animation on scroll event.

  • https://greensock.com/docs/TimelineMax/fromTo()
     
  • NOTE: by default, immediateRender is true in fromTo() tweens, meaning that they immediately render their starting state regardless of any delay that is specified. This is done for convenience because it is often the preferred behavior when setting things up on the screen to animate into place, but you can override this behavior by passingimmediateRender:false in the fromVars or toVars parameter so that it will wait to render the starting values until the tween actually begins.

So see if that works and let us know if your still having issues like your seeing in Safari. If you are you might have to check the ScrollMagic Issues page  and see if anyone else having that issue of ScrollMagic firing animation right away on load. The reason i recommend to ask ScrollMagic git Issues page is because even though ScrollMagic is made with GSAP, it is not made by GSAP. So they would be the best to help you on specific ScrollMagic bugs or issues.

 

Happy Tweening :)

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