Problem with TimeLineMax

[Lexy]

Hi everyone,

 

I have a problem with this code and I'm a beginner in Jquery. 

 

I have a SVG element and I want make it bounced. 

 

But it's not working and I don't understand why. I think my javascript could not find my svg element but I don't know how to fix it. 

 

I have import JQUERY and GSAP this way

 

<script src="//cdnjs.cloudflare.com/ajax/libs/gsap/1.14.2/TweenMax.min.js"></script>

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

 

I someone could help  

 

Thanks 

 

Lexy

See the Pen EVvKoN by anon (@anon) on CodePen

[Jonathan]

Hello,

 

I noticed in your JS, You had a to() tween but it was missing the duration parameter:

 

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

// this is missing the duration parameter
// to(target, duration, vars)
tl.to(layer1, { yPercent: -200 });

// this should be this with a duration (number)
tl.to(layer1, 1, { yPercent: -200 });

did you mean to use the GSAP set() method? .. The GSAP set() method is basically a zero-based tween

 

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

// sets a value on a property
tl.set(layer1, { yPercent: -200 });

also i noticed some CSS properties have some typos

/* position is not a valid property for translate */
#logo {
  hieght: 1053px; /* minor typo for height */
  width: 745px;
  margin: 100px auto 330px auto;
  position: translate(-50%, -50%); /* should be transform property */
}

/* should be this */
#logo {
  position:relative;
  height: 1053px;  /* should be height */
  width: 745px;
  margin: 100px auto 330px auto;
  transform: translate(-50%, -50%); /* should be transform */
}

After making the changes you can see it animate:

 

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

 

I noticed you were using TweenMax 1.14.2 in your codepen example.. You should try and uses Tweenmax 1.18.0 .. it has more goodies for you to play with

 

http://greensock.com/gsap-1-18-0

 

Here is a great video tut by GreenSock on how to create a codepen demo example:

 

http://greensock.com/forums/topic/9002-read-this-first-how-to-create-a-codepen-demo/

 

Codepen has a dropdown so you can easily add the latest version of GSAP

 

[Diaco]

just in addition to Jonathan's advice , try fromTo tween too :

TweenLite.fromTo( '#layer1' , 1 , {yPercent:-200} , {yPercent:0,ease:Bounce.easeOut} );

[Lexy]

Thanks a lot, and yes Jonathan i was meaning set(), I discovered that few time after posted my problem but I got a another one with this method :

 

tl.to(layer1, 2, {y: "+50px", ease: Bounce.easeOut})

.staggerFrom(letters, 0.10, {autoAlpha: 0}, 0.03);

}

 

the to() is ok but nothing happend with the staggerFrom(). 

 

Letters is a svg path for an image ( image of text).

 

I just want an effect when the title(svg image) appears. 

 

One more thing, do tou have some good advices for putting little sound when title appears ( llike a sound of  keyboard ) ? 

 

I appreciate, thank you so much.

 

Lexy

[Diaco]

pls check this out : 

See the Pen RWZMBz by MAW (@MAW) on CodePen

[Jonathan]

I think you mean +=

tl.to(layer1, 2, {y: "+=50px", ease:Bounce.easeOut})

So for relative values you would use += or -=

for sound you could try media elements.JS

http://mediaelementjs.com

or try SoundJS

http://www.createjs.com/soundjs

Link to GSAP DOCs

https://greensock.com/docs/#/HTML5/GSAP/

[Lexy]

Thanks this is awesome. All of you are awesome