Jump to content
GreenSock

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

how to apply fade out effect after 5 scrolls

Recommended Posts

i have used greensock(gsap) with scrollmagic jQuery library. i tried to create same effect as on reference site. but i stuck with some issue. my question is when i scroll 5 times or more times then fade out the first section only.

what i need reference site https://www.beargrylls.com/

 

 

 

See the Pen BaBjvGK by web-riderz (@web-riderz) on CodePen

Share this post


Link to post
Share on other sites

Hey @sumith,

 

Welcome to the GreenSock Forum.

 

Maybe these examples will help you further.

Here is the duration of the scene set to a very high absolute value:

 

See the Pen VNxpPB by mikeK (@mikeK) on CodePen

 

Here's an alternative to scrollMagic

 

See the Pen BXNOgN by mikeK (@mikeK) on CodePen

 

Happy tweening ...

Mikel

 

 

  • Like 3

Share this post


Link to post
Share on other sites

hi @mikel thanks for reply.

but i need when i scroll 5 time then show fade out, not first scroll to fade-out.

Share this post


Link to post
Share on other sites

@mikel it doesn't work in my code. do you have any solution ???

 

please help me.

thanks  

Share this post


Link to post
Share on other sites

Hey @sumith,

 

What exactly is your problem?
What do you mean by 'scroll 5 time then show fade out'?


Please make a new CodePen.
But please without a fade out on a video (that would not start anyway) - better on an image.

 

Best regards

Mikel

Share this post


Link to post
Share on other sites

ok @mikel  thanks for reply,

 

i want after scrolling 5 times on page then image or video should start showing. 

i have also updated codepen code please have a look. 

 

 

Best regards 

Sumith

Share this post


Link to post
Share on other sites

Hey @sumith,

 

Some pointers:

 

//create a timeline instance
var tl = new TimelineMax()
//the following two lines do the SAME thing:
.add( TweenMax.to("#id", 2, {x:100}) );
.to("#id", 2, {x:100}); //shorter syntax!

By default, animations are inserted one-after-the-other, but it's easy to control precisely where things go using the position-parameter.

 

I still do not understand, what do you mean by 'scroll 5 time', but here's a fork of your case:

 

See the Pen NWKNQwW by mikeK (@mikeK) on CodePen

 

Happy tweening ...

Mikel

 

 

  • Like 1
  • Thanks 1

Share this post


Link to post
Share on other sites

hey @mikel 

thanks for your help.

I find one issue when i jump to next section using mouse scroll, images are fading but scaling animation

 of section first is stop. is there anyway images fading with scaling effect on mouse scroll

 

"I still do not understand, what do you mean by 'scroll 5 time'"  it means images effect show on while scrolling not on page load and first scroll.  

 

please find the attachment video

https://drive.google.com/file/d/1UEU1xBhovlgiWiL91hvqwLhP1AqP45sQ/view?usp=sharing

 

 

best regards

sumith

 

Share this post


Link to post
Share on other sites

You just have to change the offset of the image reveal tween. 

 

I think it would be best if you spent some time to understand mikel's approach and what it's doing. Then you can make changes yourself. We can't help you with each and every step of the way.

  • Like 3

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.

×