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

[Linde 4 Likes (Newbie)]

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>

<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"/>
</g>

 

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

[PointC 8,599 Likes (Superhero)]

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.

https://greensock.com/position-parameter

 

Happy tweening.

 

[Linde 4 Likes (Newbie)]

@PointC Thankyou ! This is very helpfull