Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
hybreeder

Onscroll animation using GSAP

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

Ya it seem to work now, do you have any other question?

Link to comment
Share on other sites

Hello Shail,

 

My issue not resolved. I just updated the code in codepen and I need when user scroll it than animate the articles on the scroll.

Link to comment
Share on other sites

You will probably have to do that using something like ScrollMagic, following are some tutorials that will help you learn basics. It works with horizontal scroll too.

 

 

Link to comment
Share on other sites

Hello Sahil,

 

I tried that also but it's not working. vertically I can do but horizontally not working with my code.

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

Hello Sahil,

 

It will great help if you tell me how to animate single paragraph.

 

$('article').each(function(index, elem){

}

 

Above code will animate the whole article. I need a single paragraph. Any idea?

Link to comment
Share on other sites

I have updated the tween, and changed offset on triggers.

 

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

 

See the Pen pdOvwJ?editors=0110 by Sahil89 (@Sahil89) on CodePen

 

Link to comment
Share on other sites

but it will affect all the P tag in the articles. Right?

Link to comment
Share on other sites

ya all p tags inside individual article. If you are not familiar with jQuery selectors you can read it here. That site covers most other basics which will improve your foundation.

  • Like 1
Link to comment
Share on other sites

Hello Sahil,

 

I know Jquery, It will affect all the P tag in the articles.

You know what I did I just remove all the class from SPAN tag in the HTML and remove the P and added the SPAN in the script,  to check it is working or not but it's not working.

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