Jump to content
Search Community

How to create a floating shadow ?

hafsa 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

First things first ... you can greatly simplify your code using a timeline.


See the Pen mJgaXE?editors=001 by sgorneau (@sgorneau) on CodePen


For the shadow movement ... are you looking for it to remain in place but grow (perhaps fade out a bit) as the giraffe moves up ... or looking for it to move away from the giraffe when the giraffe moves up? (Or something else altogether?)

  • Like 1
Link to comment
Share on other sites

Hello hafsa, and welcome to the GreenSock forum!


This is just short and quick example, using a label on both tweens so they move in unison.


See the Pen jPRXdK by jonathan (@jonathan) on CodePen


It also uses the yoyo:true and repeat:-1 so the tweens go back and forth like a yoyo forever


Please look at the

See the Pen jPRXdK by jonathan (@jonathan) on CodePen

and the TweenMax Docs


This can also be done in using TimelineMax more control over your tweens and timeline


Also i would look into removing all the extra nested <g> tags to clean up the SVG markup


I hope this helps!



See the Pen jPRXdK by jonathan (@jonathan) on CodePen

TweenMax: http://greensock.com/docs/#/HTML5/GSAP/TweenMax/

TimelineMax: http://greensock.com/docs/#/HTML5/GSAP/TimelineMax/

  • Like 3
Link to comment
Share on other sites

 Jonathan I have one last question !! why did you add "myG" at the end of TweenMax ?? the elementItem already contain the id "myG" ?


TweenMax.to(elementItem, 1.3, {

    delay: elementAnimationDelay, //amount of delay in secons

    y: "-=40px",

    ease: Power2.easeOut,




    onComplete: elementMoveUp


Link to comment
Share on other sites

hafsa that is a label.. i gave them both the same label name so the tweens would move through the timeline at the same time.. without the same label.. the first tween would play, and then the second tween right after it.


"myG" was just short for myGiraffe :)


Here is a video tut by the Mighty Carl, on how to sequence tweens




and the GSAP JS start video tut:




and another video tut of the position parameter:




I would advise to bookmark GSAP Docs page for fast learning and reference:



  • Like 1
Link to comment
Share on other sites

And you can make the lines of code even shorter by just using yoyo:true, since it wil just animate back to the original css values using to()


See the Pen YXMBQQ?editors=001 by jonathan (@jonathan) on CodePen


Also using autoAlpha instead of opacity .. See CSSPlugin Docs:



Identical to opacity except that when the value hits 0 the visibility property will be set to "hidden" in order to improve browser rendering performance and prevent clicks/interactivity on the target. When the value is anything other than 0, visibility will be set to "inherit". It is not set to "visible" in order to honor inheritance (imagine the parent element is hidden - setting the child to visible explicitly would cause it to appear when that's probably not what was intended). And for convenience, if the element's visibility is initially set to "hidden" and opacity is 1, it will assume opacity should also start at 0. This makes it simple to start things out on your page as invisible (set your css visibility:hidden) and then fade them in whenever you want.


yoyo : Boolean - If true, every other repeat cycle will run in the opposite direction so that the tween appears to go back and forth (forward then backward). This has no affect on the "reversed" property though. So if repeat is 2 and yoyo isfalse, it will look like: start - 1 - 2 - 3 - 1 - 2 - 3 - 1 - 2 - 3 - end. But if yoyo is true, it will look like: start - 1 - 2 - 3 - 3 - 2 - 1 - 1 - 2 - 3 - end.



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