[Good idea for practice]

@Dipscom Thanks! Will try to do that. Yeah i see some really creative idea's and im like wow i wouldnt have thought of that myself. 
So now i kinda know the basic stuff, i want to do some more advanced things. I always wonder how people do some things its incredible. 

 

This is a good tip and will look intro it

[Good idea for practice]

Already have done that, would like to do some more "advanced" animations with interactivity. 

[Nested Timelines in Animate CC 2017]

Hey, im a complete beginner but im still going to try and help you. Maybe you could try this:

Create a function like this:

 

function function1here() {    
  var tl = new TimelineLite();

// add the rest here
  return tl; // put this at the end.
}

 

function function2here() {    
  var pw = new TimelineLite();

  // add the rest here
  return tl; // put this at the end.
}

 

 

function createMasterTimeline() {
  timeline = new TimelineLite();
    .add(function1here())
    .add(function2here()) 
    timeline.timeScale(1)//used to control the speed of the timeline
}

 

// now call the mastertimeline function

 

createMasterTimeline()

 

now you should be able to do what you want and you can create the individual timelines

[Good idea for practice]

Hey guys, i am practicing gsap for a while now and i want a challenge but dont have the cerativity yet.

Mostly i make banners for google adwords and have seen some awesome examples, wich i think are a little bit to complicated for me to create yet.

What would you recommend a beginner to make something awesome and not so complicated?

 

Thanks guys

[using multiple labels and .from/.to in a timeline]

@Sahil ahha yeah was just practicing some sequencing. It is intentional. 

[using multiple labels and .from/.to in a timeline]

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

 

Above is the version i do not want. For some reason it puts the .from first.

 

This is the second version without the second.add that does work. In this pen i added a new element. I want this to happen not the the new element but to the blocks. i want them to come back from out of vieuw back to their starting positions. @Sahil

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

 

 

Sketch :

[using multiple labels and .from/.to in a timeline]

@Sahil Yeah sure!  If u just have a couple of minutes. will draw it out for you and i will post a codepen of what i have currently.

[using multiple labels and .from/.to in a timeline]

@PointC What i am trying to achieve is that the 3 blocks all go out of the border ( out of vieuw ) to opacity 0. and return to their starting position all at the same time. I will try your code and see what happens   Also will do a quick google search on how to include jquery on codepen.

 

thanks for helping me out once again <3

[Moving background]

@GreenSock Ty it works now, guess the onload and class instead of ID fixed it. Thanks allot for taking the time to respond .

[Moving background]

Hmmm, thats weird. Yeah the url is an image in the root folder of my project.

Greensock works fine in my other project folders. got 20 of them or so.

 

<script
  src="https://code.jquery.com/jquery-3.2.1.min.js"
  integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
  crossorigin="anonymous"></script>

 

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

 

<script src="action.js"></script>
  </body>

 

This is what the end of my html page looks like.

Also i want to use an image i downloaded. Is this possible with the background url ()

and yeah i guess i added the wrong jquery plugin on codepen. couldnt find the proper version.

 

firstly animation was a class, thought it would make a difference maybe if i changed it to an ID. 

Thanks for pointing that out to me.

 

Going to look into it again and hope it works

@GreenSock

 

Ty for the help!

 

 

[Moving background]

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

I Can't seem to get it working. console shows now errors. everything should be exactly the same as the codepen you sent me @Jonathan 

Hope u can point out the errors for me, would be nice to know what went wrong. 

 

Thank for the support!

[Moving background]

@Jonathan nvm for some reason it won't move. got everything exactly the same. also position absolute and no console errors.

U maybe would know what the problem could be?

 

<div id="animation">

<div id="content">
<h1> bla bla bla bla bla </h1>
<h3> koop nu bladiebladie </h3>

</div>

<footer id="footer">

<h3> hallo dit is een footer banner </h3>

 

 

// window load event makes sure image is // loaded before running animation
$(window).on("load", function() {

var tl = new TimelineMax({repeat:-1});
tl.to("#clouds", 30, {
    backgroundPosition: "-2247px 0px",
    //autoRound:false,
    ease: Linear.easeNone
});

});

 

#animation{
background:url("stingray.jpg") repeat 0 0 transparent;
width:300px;
height: 600px;
margin:50px auto;
border-radius:20px;
position:absolute;
}

 

 

[Moving background]

@Jonathan Nice! I tried it and it worked Exactly what i was looking for.

yet again u guys are awesome

[Moving background]

@Jonathan hey jonathan, thank allot for the fast reply,

 

Yes this is what i mean but what i am wondering is: is this also possible with just background-image and can i still put element on top of it?

Like text etc?

 

Greeting!

[Moving background]

Hey guys,

 

i was wondering if there was a way to animate a background so that it is slowly moving or could add some different kind of effects.

Thank you!

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

[using multiple labels and .from/.to in a timeline]

 

Codepen doesnt work btw dont know why..

 

Hey guys what i want to do: animate them out of the screen then animate them all 3 at once back.

How do i do this? i commented out the .from because it will do that first and then the rest of the code.

Why is this?
 

Ty guys

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

[Continue animation from where it stopped]

@Tasty Sites  yeah i got thay laying here right next to me! 

Thanks for the tip

[Continue animation from where it stopped]

@Tasty Sites Amazing site! Really stoked about greensock. Still little bit hard. have completed it all today i'm going to make notes and try to recreate everything. Thanks

[Continue animation from where it stopped]

@Tasty Sites

 

Thanks! Going through it today

Think this is going to help allot

[Continue animation from where it stopped]

@OSUblake Thanks for the explaining. Thats awesome! Then i will put some more time into the sequencing like you suggest.

I want to grow to a point where i am able to implement jquery into the banners also since i want to learn how to make animated and interactive banners.

 

[Continue animation from where it stopped]

@OSUblake

 

Hey OSU thank you for your reply,

It's close @Carl made this for me in codepen and this is what i meant

See the Pen GMRaaq by GreenSock (@GreenSock) on CodePen

 

Interesting to see that the code's are different. Will study it and try to understand how it works and what differs from eachother. Going to take a good deep look into jquery today to try and understand all of this better so i can make some really awesomme stuff like you guys.

 

 

 

See the Pen GMRaaq by GreenSock (@GreenSock) on CodePen

 

 

[fade in out same position]

@Carl Hey carl, thank you for your fast reply. This really helps me understand. This is exactly what i meant! 

@PointC Thank you for the reference, will take a deep look into it. 

Have almost watched almost all tutorials and i am making slow but steady progress. This really helps me out allot.

 

You guys are awesome ! 

Greeting from the netherlands.

[fade in out same position]

Hey guys,

I have been struggling to achieve some ( i guess ) basic gsap stuff.

What i want to achieve is a text that comes in from out of the screen to the center of the screen and then stays there for a couple of seconds and then moves out of the screen again. Now it is time for a new text that comes in from the left goes to the same position and moves out of the screen again.

I tried to achieve this but the problem that i've encountered what that the 3 text items where overlapping eachother at the start.

the other 2 text items need to be invisible when the 1st one moves to the center.

 

step 1 : black screen.

step2: fade in text 1 to the center of a div coming from the left side of the screen

step 3: after a couples of seconds fade out text 1 and disappear.

step 4 : text 2 becomes visable and fades in from the left to the center. 

step 5 : stays there for a couple of seconds --> moves out of screen again

step 6: repeat process.

 

I have also drawn to explain, since english isnt my native language.

Thank you guys, greensock is awesome!

 

 

[start animation after sometime]

Hey guys, i am new to greensock.

 

i want to start the 3th .from after a delay of 2 second and continue the animation ( make it wiggle )  and repeat the animation.

Basically i want to wiggle the animation after 2 seconds after the previous 2 .from are done.

and another question:  can you point me to some basic tutorials explaining labels,timelines and nested timelines.

 

thank you guys in advance,

best regards,

Tim.

 

 

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

[Continue animation from where it stopped]

@PointC

Hey thank you for your reply, 

what i meant was after the animation stops as you see in codepen. I want to grab the elements from where they stopped and then fade out ( disappear slowly) bij moving out to the right.

 

thanks