Jump to content
Search Community

Covert slider to javascript control mastertimeline function

timdt test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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

Link to comment
Share on other sites

@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>

 

Link to comment
Share on other sites

@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

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.
×
×
  • Create New...