Jump to content
Search Community

scale plus fade

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

Link to comment
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
Link to comment
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
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...