Jump to content
Search Community

Onscroll animation using GSAP

Narendra Verma 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

I need to scroll animation when the user scrolls the mouse wheel.Now animation is working on page load. I need content should animate on the scroll. First two articles is working but when I scroll it than animation is not working.

I tried some code but not working.

would you help me out in this?

 

https://jsfiddle.net/Narendra2015/0gL8k79a/

Link to comment
Share on other sites

That's because you were changing it's visibility on wheel event rather than on scroll event.

 

https://jsfiddle.net/jh42z38z/

 

Also, try posting your demos using Codepen, most of forum members are used to it. If you want to continue posting using jsfiddle, post your link within post instead of posting it in textbox with label 'Codepen URL' because jsfiddle links don't show up in post when you post it like that.

  • Like 3
Link to comment
Share on other sites

var header_text_1=document.getElementById("scroll_1");
TweenLite.from(header_text_1, .5, { ease: Power0.easeOut, y: 10 });

var header_text_2=document.getElementById("scroll_2");
TweenLite.from(header_text_2, .5, { ease: Power0.easeOut, y: 10 });

 

It works but there are some issues with your set up. You are using ids inside first two articles only so you will never notice any animation on rest of articles. Plus you are calling that animation out of any event, so there is no chance of anything triggering on any event.

 

Following is the demo that shows how you can use ScrollMagic so you can edit it change animations however you like.

 

See the Pen YEjVLX by Sahil89 (@Sahil89) on CodePen

 

  • Like 1
Link to comment
Share on other sites

Hello Sahil,

 

When I checking Change view on the full page is not working properly. I set the id because I have to animate individual and your code is animating the whole article.

I have to animate first two articles on the page load and rest of article have to animate on the scroll.  Your code is only first article animating. Third articles animating when second articles half goes.

 

It displaying the lots of white space on the right side.

 

Link to comment
Share on other sites

I think you should watch those tutorials I posted in previous reply. It is scroll based animation you can adjust the trigger offset and make adjustments as you like. As for white space etc, you can fix that once you follow the tutorials and change your CSS. 

Link to comment
Share on other sites

You are not being clear about what you want to do.

 

1. If you want all p tags to animate on scroll I have posted demo for it.

2. If you just wanted them to animate on page load, then you can do that directly without needing to use scroll magic at all.

3. If you have removed p tags and added span then you will need to update javascript to animate span tags.

 

It will be better if you post a demo to show what is not working and clarify what you are trying to do.

Link to comment
Share on other sites

Hello Sahil,

I really appreciate your support. I just want to understand the code. I check the video which you shared with me but that not helped me. I change the p tag and added the span in the script like this.

 

 var tween = TweenMax.fromTo($(elem).find('span'), 0.5, {scale: 0.5, yPercent: 100}, {scale: 1, yPercent: 0});

 

But it is not working if I add the P tag then it's working.

 

Also I removed the all the class and id from the span tag.

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