[How to add an audio from Youtube or Freesound at codepen.io?]

Hello everybody,

 

I have a simple question. Probably my problem is easy to fix, but I can not figure it out... 

 

My question is:
How to import an audio file / mp3 file to codepen.io? 

 

I've seen many examples and I can't import my own audio file in my codepen file. 

 

I've download this audio file in mp3 format. This is the audio that I want to use. 

How do I convert this YouTube audio into this line of code? -->  playFile('https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/success.mp3') 

 

 

I hope I am clear enough.

 

Thanks in advance

 

 

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

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

@PointC Thankyou ! This is very helpfull  

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

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

[How to start a second timelineMax after a button click?]

@Carl Thankyou for your time. This is exactly what i want! I will remember this for the next times. Thankyou for your help!

[How to start a second timelineMax after a button click?]

Hey everybody,

 

I have a question about to start a second timelineMax. 

I was discovering and trying out the splitText. Now I have a problem.

I added a red text with "Move the box". I want this to appear after the start button has been pressed. I'm thinking about a postion parameter? I've tried many options, but I can't figure it out.

 

This is the code of the red text. This must be appear when the start button is pressed.

var tl= new SplitText("#box > p", {type: 'chars', charsClass: 'overflow'});
var tl = new TimelineMax();
tl.staggerFromTo('.overflow', 0.1, {opacity: 0, y: 50}, {opacity: 1, y: 0}, 0.05);

Could someone help me out?

Thanks in advance

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