[Slider function not working]

Just copied the code from the gsap codepen. And for some reason i cannot figure out why it is not working.
Also it is not showing since i dont know how they even created the slider.

 

 

See the Pen zPvQqW by timdt (@timdt) on CodePen

[Background parallax effect on mouse move]

Nice background haha

[Staggerfrom position absolute/relative text Effect]

@Sahil i now did it like this but this wasn't my intention. I want i to be more simplistic.

 

See the Pen YEKPZy by timdt (@timdt) on CodePen

 

[Staggerfrom position absolute/relative text Effect]

@Sahil i have added another word that changes at the text. thought  would use your callback function but its to much inception for me. can u take a look pleaaaaaasseeee 

 

See the Pen eeOmYK by timdt (@timdt) on CodePen

 

[Staggerfrom position absolute/relative text Effect]

finished product thanks to @Sahil

 

See the Pen Rjbwrv by timdt (@timdt) on CodePen

 

 

 

[Staggerfrom position absolute/relative text Effect]

@Sahil nevermind i fixed it

 

  function timelineone(){
    var duration = 1;

    var tl = new TimelineMax()
    tl.staggerFrom(".text", duration, {y: 60},1)
    return tl;

    }

[Staggerfrom position absolute/relative text Effect]

@Sahil and is it possible to after the first part "ik " (shows ups, doesnt disappear ) , "ben" ( shows up, doesnt disappear), "gespecialiseerd" (shows up, doesn't disappear) Is that also possible?????

[Staggerfrom position absolute/relative text Effect]

@Sahil oh wauw, thank you so much will look into it Thanks for the help

[Staggerfrom position absolute/relative text Effect]

@Sahil they need to be next to eachother and then show up one by one, is this possible?

[Staggerfrom position absolute/relative text Effect]

Hey guys, yesterday with your help i created this:

 

See the Pen qPeeyd by timdt (@timdt) on CodePen

 

Super awesome! 

 

Today i am trying to create the same thing but then with a stagger.

Instead of positioning each element  and then animating it, i was wondering if i could use the staggermethod to accomplish te same thing but then with one word at a time.

 

right now i am stuck with the positioning. Because somehow position relative won't animate .
It works in this demo though so... i am lost ahha.

https://greensock.com/stagger

 

Thanks guys!

See the Pen Xevvqw by timdt (@timdt) on CodePen

[Text reveal animation]

@PointC very nice!

[Text reveal animation]

@Sahil Nice ! This is what i meant . awesome

[Text reveal animation]

Quote

 

@Carl Close almost what i meant. 

and yes it always is haha, u just need to know what tricks to use sometimes to get something done.
I already am much better thanks to you guys 

 

the line stays on the same position. and out of the line comes the text. 
Now u don't have a div to hide and show it with.

How is this accomplished?

[Covert slider to javascript control mastertimeline function]

@Sahil Sorry, won't make it today. Need to figure out some other stuff probably tomorror if i have time. I combine learning gsap and work together

[Text reveal animation]

Hey guys, i was lookin on the forum and on the internet to finds something about a show/reveal text animation.

I want to draw a line in html and out of that line the text is revealed. almost like you lift a curtain and the text is revealed.

Looks very simulair like this. 

 

i tried to wrap a text element inside of a div with an overflow and then with gsap lift the div wich will reveal the text behind it.
Didnt get that to work unfortunately since the elements both move when i try it.

 

Any suggestions on how to achieve this?

[Covert slider to javascript control mastertimeline function]

@Sahil oke hold on will give it another try and then i will send the code again with the errors. Got some work to do before i continue with solving this problem so in a couple of hours i will post again  Thanks for the help i appreciate it very much

[Covert slider to javascript control mastertimeline function]

@Sahil

 

i tried to reacreate, but i dont get the part where he uses the parameters. because i have just single classes and dont have any div's. only one div.
When i use a paramter i get the "undefined" error. and when i create a var assign the classes etc. the animation doesn't play.
I took the master timeline out of the function so it is globally accessible.  Do i need to use the parameters?

 

 

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="ad.size" content="width=300,height=600">
    <meta name="author" content="treeonline.nl">
    <title>htmlanimatie</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TweenMax.min.js"></script>

<Style>

    body{
      margin:0px 0px 0px 0px;
      padding:0px 0px 0px 0px;

    }

    #animation {
      width: 300px;
      height: 600px;
      border:solid black 1px;
      margin:0 auto;
      background-image: url("images/bannerleeg.png");
      overflow:hidden;
      position: relative;
    }

    .tekst1{
      font-size:26px;
      color:#283354;
      font-family:sans-serif;
      font-weight: 400;
      position: absolute;
      top:45px;
      padding:10px;
      text-align: left;
      left:14px;

    }

    .tekst2{
      font-size:26px;
      color:#283354;
      font-family:sans-serif;
      font-weight: 400;
      position: absolute;
      top:45px;
      padding:10px;
      text-align: left;
      left:14px;

    }

    .tekst3{
      font-size:26px;
      color:#283354;
      font-family:sans-serif;
      font-weight: 400;
      position: absolute;
      top:45px;
      padding:10px;
      text-align: left;
      left:14px;

    }

    .wplogo{
      width:100px;
      height:100px;
      position: absolute;
      top:270px;
      left:93px;
    }

    .wpdash {
      width:220px;
      height:127px;
      position: absolute;
      top:258px;
      left:33px;
    }

    .theme {
      width:220px;
      height:127px;
      position: absolute;
      top:258px;
      left:33px;
    }

    #button {
      background:#f87200;
      color:white;
      font-size:19px;
      font-family: arial;
      top:525px;
      left:67px;
      text-align: center;
      text-decoration: none;
      position:absolute;
      border-radius:10px;
      padding:12px;
    }

  .gradient{
  background: #9af600; /* Old browsers */
  background: -moz-linear-gradient(top,  #f69f00 0%, #a0fd00 50%, #90e700 51%, #a0fe00 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#9af600), color-stop(50%,#a0fd00), color-stop(51%,#90e700), color-stop(100%,#a0fe00)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top,  #f69f00 0%,#a0fd00 50%,#90e700 51%,#a0fe00 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top,  #f69f00 0%,#a0fd00 50%,#90e700 51%,#a0fe00 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top,  #f69f00 0%,#a0fd00 50%,#90e700 51%,#a0fe00 100%); /* IE10+ */
  background: linear-gradient(to bottom,  #f69f00 0%,#a0fd00 50%,#90e700 51%,#a0fe00 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9af600', endColorstr='#a0fe00',GradientType=0 ); /* IE6-9 */

}

.buttons {
  display:inline;
  position: relative;
  left:635px;
  margin-left: 7px;
}
</style>
  </head>

  <body>

<div id="animation">
<div id="tekstwrapper">
<p class="tekst1 panel1"><strong>U wilt wordpress leren maar heeft <br> weinig tijd?</strong></p>
<p class="tekst2 panel2"><strong>Leer wordpress in uw eigen tempo.</strong></p>
<p class="tekst3 panel3"><strong>3-Daagse Wordpress cursus op locaties in heel Nederland</strong></p>

<img class="wplogo panel1" src="images/wp.png"/>
<img class="wpdash panel2" src="images/wpdash.jpg"/>
<img class="theme  panel3" src="images/theme.jpg"/>
</div>

 

<a href="https/www.google.nl" target="_blank" id="button" class="gradient"><strong>Meer informatie</strong></a>

 

</div>

    <div id="controls">
      <button id="play" class="buttons">play</button>
      <button id="pause" class="buttons">pause</button>
      <button id="reverse" class="buttons">reverse</button>
      <button id="resume" class="buttons">resume</button>
      <button id="restart" class="buttons">restart</button>
    </div>

<script>

var  tekst1 = document.getElementsByClassName(".tekst1"),
     tekst2 = document.getElementsByClassName(".tekst2"),
     tekst3 = document.getElementsByClassName(".tekst3"),
     wplogo = document.getElementsByClassName(".wplogo"),
     wpdash = document.getElementsByClassName(".wpdash"),
     theme = document.getElementsByClassName(".theme"),
     button = document.getElementsByClassName(".button")
     var button = document.getElementById("button");

//Button controls for playback rewind etc ------------------------------------------
     var play = document.getElementsByClassName("play");       // play button
     var pause = document.getElementsByClassName("pause");     // pause button
     var reverse = document.getElementsByClassName("reverse"); // reverse button
     var resume = document.getElementsByClassName("resume");   // resume button
     var restart = document.getElementsByClassName("restart"); // restart button
   

    function timelineone(one){
      var tl = new TimelineMax();
      tl.add("intro")
      tl.from(".tekst1",0.6,{x:250,ease:Back.easeOut},"intro")
      tl.add("bouncedelay","-=0.6")
      tl.add("introout","+=2")
      tl.to(".tekst1",0.2,{autoAlpha:0},"introout")
      tl.from(".wplogo",1.2,{scale:0,autoAlpha:0,ease:Elastic.easeOut},"bouncedelay")
      tl.to(".wplogo",0.3,{autoAlpha:0},"introout")
      return tl;
    }

    function timelinetwo(){
      var tl = new TimelineMax();
      tl.add("intro")
      tl.from(".tekst2",0.6,{x:400,ease:Back.easeOut},"intro")
      tl.add("introdelay", "-=0.6")
      tl.add("wpdashout", "+=2")
      tl.to(".tekst2",0.3,{autoAlpha:0},"wpdashout")
      tl.fromTo(".wpdash", 0.6, { clip:"rect(125px 300px 0px 0px)"}, { clip:"rect(0px 300px 250px 0px)"},"introdelay")
      tl.to(".wpdash",0.3,{scale:0},"wpdashout")
      return tl;

    }

    function timelinethree(){
    var tl = new TimelineMax();
    tl.add("intro")
    tl.from(".tekst3",0.6,{x:400,ease:Back.easeOut},"intro")
    tl.add("introdelay", "-=0.6")
    tl.fromTo(".theme", 0.6, { clip:"rect(125px 300px 0px 0px)"}, { clip:"rect(0px 300px 250px 0px)"},"introdelay")
    tl.add(TweenMax.to(button, 0.6, {boxShadow:"0px 0px 20px 2px #f69f00", repeat:4,repeatDelay:0.4, yoyo:true},"-=0.8"))
    return tl;
    }

      var master = new TimelineMax({
    repeat: 0, // infinite repeat
    repeatDelay: 4 // you can set a delay if you want
    });
      master.add(timelineone())
      master.add(timelinetwo(),"-=0.4")
      master.add(timelinethree(),"-=0.4")
      master.timeScale(0.8);

    var button = document.getElementById("button");
      button.addEventListener("mouseover", onHoverOver);
      button.addEventListener("mouseout", onHoverOut);

    function onHoverOver(e){
      TweenMax.fromTo( button, 0.6, { boxShadow:"0px 0px 0px 0px orange"}, {boxShadow:"0px 0px 20px 2px #f69f00", repeat:-1, yoyo:true});
    }

    function onHoverOut(e){
      TweenMax.to( button, 0.2, {boxShadow:"0px 0px 0px 0px #f69f00"});
    }

/*
    //button control
     play.click(function(){
       master.play();
     });

     pause.click(function(){
      master.pause();
     });

     reverse.click(function(){
       master.reverse();
     });

     restart.click(function(){
       master.restart();
     });

     resume.click(function(){
       master.resume();
     });

*/

</script>

  </body>
</html>

 

[Covert slider to javascript control mastertimeline function]

@Sahil thanks this will help me further ( i hope ) because jquery cannot be used  

[Covert slider to javascript control mastertimeline function]

Hey guys,  i'm back ;p

 

I tried to recreate the slider. but i'm really stuck.

I can get it to work with just a single timeline in a global variable with jquery.

 

The question is now how can i control multiple timelines in a function in javascript.
Or is it only possible when using jquery?

 

Thanks! <3

See the Pen eGagGQ by timdt (@timdt) on CodePen

[oncomplete restart first function timeline]

@OSUblake thank you, i did know that unfortunately. didn't know why i maked it so complicated ahha.

 

Thanks allot!

[oncomplete restart first function timeline]

Hey guys, i've been trying to figure this out all day and i know you guys will fix this easily.

 

i want to after my animation is done to repeat the animation.

How is this accomplished?

 

See the Pen QqRjRV by timdt (@timdt) on CodePen

[Hover effect button mouseenter mouseleave]

@Shaun Gorneau

 

Yeah sorry about the variable names I was in a hurry so didnt pay much attention to that.

Oke, didnt know that about the eventlisteners. will look that up also today because i've never heard of that before.

Thank you for taking the time to fix the issue for me.
It is much appreciated.
 

[Hover effect button mouseenter mouseleave]

Hey guys, so i stole this button from one of your tutorials.

It works on the one i reacreated but...

 

I am making a banner for adwords. This means i cannot use jquery.
This is where i am stuck.
How do i get the glowing effect to work on my button just with javascript and TweenMax?

 

Thanks guys much love <3

See the Pen ZXPXyx by timdt (@timdt) on CodePen

[Uncaught Cannot add undefined]

Thanks allot i fixed it! Will watch the video's and awesome that you provided me with so much information.

You guys are great.

 

See the Pen eGXGJy by timdt (@timdt) on CodePen

 

[Uncaught Cannot add undefined]

Uncaught Cannot add undefined into the timeline; it is not a tween, timeline, function, or string.

 

Hey guys, sooo  first time i am getting this. Cannot understand why.

My other documents work but with this i am suddenly getting this weird error.

Must be something i am overlooking.

 

Btw everything is in one file because i am making something for google adwords

 

Help would be very much appreciated.

 

Side question: 

 

item 1 from x-250 to 0 (center) fade out(opacity 0 )

item 2 from x-250 to 0 (center) fade out(opacity 0 )

item 3 from x-250 to 0 (center) fade out(opacity 0 )

 

Could this be achieved with stagger? and how?

thankss! 

 

 

See the Pen jGJBgV by timdt (@timdt) on CodePen