Jump to content
GreenSock

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

scale plus fade

Recommended Posts

I am trying to accomplish what I thought was going to be simple but turns out its not as simple as I thought.. I just started using gsap and scroll magic spent tons of money on courses but still haven't had any luck accomplishing my goal. I have a hero image that is fullpage there will be some text inside of it. what I want it to do is when scrolling I want the background image to scale bigger and fade revealing the next section. I was told I need tween and sm for that I have it triggering the way it needs to but I cannot get the background image to do anything I have tried several tweens codepens videos and still where i was when i started.

 

this is a single background image set to cover the effect I am trying to accomplish is here http://www.beargrylls.com/

 

also does gsap have any detailed courses?

 

See the Pen wXdLpm by digitaldude (@digitaldude) on CodePen

Share this post


Link to post
Share on other sites

Hi @DigitalDude :)

 

I'm not sure I completely understand the desired result as I don't see any tweens in your demo. (just pins). Is this what you need to happen?

 

 

See the Pen Pajajo by PointC (@PointC) on CodePen

Hopefully that helps.

 

For GSAP training, you can check out the learning page:

https://greensock.com/learning

 

Getting started

https://greensock.com/get-started-js

 

Noble Desktop Course

https://www.nobledesktop.com/books/gsap

 

Happy tweening.

:)

 

 

PS Your demo was also missing the GSAP plugin that allows ScrollMagic to hijack the tweens. More info:

http://scrollmagic.io/docs/animation.GSAP.html

  • Like 5

Share this post


Link to post
Share on other sites

yes @PointC that is what I am trying to do what controls the scale and opacity timing?  the next section has not reached its trigger before being seen and I want to control  how big the scale is..

Share this post


Link to post
Share on other sites

The timing is based on the duration set in the ScrollMagic scene. In this particular case you have that set to 100%. If you set the duration in the ScrollMagic scene, the actual tween duration won't be used. ScrollMagic hijacks that value and tweens as the user scrolls. If you want the actual tween duration to be used, you can just skip the duration property in the ScrollMagic scene and the tween will play normally when it hits its trigger.

 

To control the scale you can adjust the value in the tween I added. I just used a scale of 2 as a quick example. 

 

Happy tweening.

:)

 

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

×