Jump to content

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

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

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.