Jump to content


How to change the background color when the morphSVG is activated by an mouseclick?

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 have made a 'day' scene. When the mouse clicks on the sun, it changes to the moon. When this happens it would be nice that the background also changed.

How is the best way to do it?


I'have added 2 skies and 2 grounds. One is for during the day and the other one is for the night. 


<g id="sky">
    <rect id="night" class= "nacht" x="1.4" y="1.2" class="st0" width="841.9" height="472.3"/>
    <rect id="day" y="1.2" class="st1" width="841.9" height="472.3"/>

<g id="ground">
    <rect id="light" x="-0.4" y="473.6" class="st2" width="841.9" height="121.7"/>
    <rect id="dark" y="473.6" class="st3" width="841.9" height="121.7"/>


I'm thinking about to add an timelineMax or an TweenMax.  How do you handle this?  I have no idea how to start...


Can someone please help me?


Thanks in advance


See the Pen aRERLB?editors=1010 by Lindeg (@Lindeg) on CodePen

Link to comment
Share on other sites

Hi @Linde :)


You'd just need to use an opacity (or autoAlpha)  tween to toggle between the day/night background elements. Using the position parameter allows you to start that tween at the same time as your morph tween.


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

More info about the position parameter.



Happy tweening.



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