Jump to content
Search Community

First project....but failed restart

cartimundi 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

Hello, i'v made my first project by greensock

 

The animation is much smoother than by Adobe Edge

the only thing is miss or won't succeed with the restart, i've tried it with restart(); to.tl(); sum.play(0);

 

it won't restart ;-(

 

someone? (maybe someone sees also other things in my code, i think it's very simple but long)

grt marcel

 

 

 

// insert code to be run when the composition is fully loaded here

var By0 = sym.$("By0");
var By1 = sym.$("By1");
var By2 = sym.$("By2");
var By3 = sym.$("By3");
var By4 = sym.$("By4");
var By5 = sym.$("By5");
var By6 = sym.$("By6");
var By7 = sym.$("By7");
var By8 = sym.$("By8");
var By9 = sym.$("By9");
var ByPK = sym.$("Bypuntkomma");
var kop = sym.$("seatskop");
var geelverloop = sym.$("geelverloop");
var premiere = sym.$("premiere");
var neon1 = sym.$("neon1");
var neon2 = sym.$("neon2");
var neon3 = sym.$("neon3");
var neon4 = sym.$("neon4");
var neon5 = sym.$("neon5");
var neon6 = sym.$("neon6");
var neon7 = sym.$("neon7");
var neon8 = sym.$("neon8");
var neon9 = sym.$("neon9");
var neon10 = sym.$("neon10");
var neon11 = sym.$("neon11");
var neon12 = sym.$("neon12");
var neon13 = sym.$("neon13");
var neon14 = sym.$("neon14");
var lamp1 = sym.$("lamp1");
var lamp2 = sym.$("lamp2");
var lamp3 = sym.$("lamp3");
var lamp4 = sym.$("lamp4");
var lamp5 = sym.$("lamp5");
var lamp6 = sym.$("lamp6");
var lamp7 = sym.$("lamp7");
var bank1z2 = sym.$("kennedy2gr");
var bank1z3 = sym.$("kennedy3fgr");
var chaisel1 = sym.$("brightonwit");
var bank2z2 = sym.$("brooke2rood");
var bank2z3 = sym.$("brooke3rood");
var hoek1 = sym.$("chicago-zand");
var prijsbank1 = sym.$("prijsbank1");
var prijsbank2 = sym.$("prijsbank2");
var prijschaisel1 = sym.$("prijschaisel1");
var prijshoek = sym.$("prijshoek");
var datum = sym.$("datum");
var afgeprijsd = sym.$("afgeprijsd");
var introductie = sym.$("introductie");
var tKennedy = sym.$("tKennedy");
var tChicago = sym.$("tChicago");
var tBrooke = sym.$("tBrooke");
var tBrighton = sym.$("tBrighton");
 
 
var ntl = new TimelineMax({repeat:-1});
var rntl = new TimelineMax({repeat:-1});
var tl = new TimelineLite();
var aanb = new TimelineLite();
 
//TweenMax.staggerFrom([neon1, neon7, neon10, neon2, neon13, neon6, neon3, neon12, neon8, neon5, neon4, neon9, neon11], 0.3, {opacity:0.05}, 0.5);
//TweenMax.staggerTo([by0, By1, By2, By3, By4, By5, By6, By7, By8], 2.5, {rotation:360}, 0.5);
 
 
//LAMPEN
ntl.from(neon1, 0.5, {opacity:0.1, y:-10})
.from(neon8, 0.5, {opacity:0.1, y:-10})
.from(lamp1, 0.5, {opacity:1})
.from(neon13, 0.5, {opacity:0.1, y:-10})
.from(lamp7, 0.5, {opacity:1})
.from(neon10, 0.5, {opacity:0.1, y:-10})
.from(lamp3, 0.5, {opacity:1})
.from(neon5, 0.5, {opacity:0.1, y:-10})
.from(lamp4, 0.5, {opacity:1})
.from(neon2, 0.5, {opacity:0.1, y:-10})
.from(neon9, 0.5, {opacity:0.1, y:-10})
 
rntl.from(neon11, 1, {opacity:0.1, y:-10})
.from(neon4, 1, {opacity:0.1, y:-10})
.from(lamp2, 0.5, {opacity:1})
.from(neon12, 1, {opacity:0.1, y:-10})
.from(lamp5, 0.5, {opacity:1})
.from(neon3, 1, {opacity:0.1, y:-10})
.from(lamp6, 0.5, {opacity:1})
.from(neon7, 1, {opacity:0.1, y:-10})
.from(neon14, 1, {opacity:0.1, y:-10})
.from(neon6, 1, {opacity:0.1, y:-10});
 
//KOP
tl.from(premiere, 2, {opacity:0, y:200, scale:0.2, ease:Bounce.easeOut})
.from(datum, 2, {opacity:0, y:100, scale:0.2, ease:Bounce.easeOut}, "-=2")
 
.from(bank1z3, 0.5, {opacity: 0.5, x:960, ease:Back.easeOut})
.from(bank1z2, 0.5, {opacity: 0.5, x:960, ease:Back.easeOut})
.from(tKennedy, 0.5, {opacity: 0}, "-=0.5")
.from(prijsbank1, 0.5, {scale: 0.5, rotation:360, opacity: 0.5, x:960, ease:Back.easeOut})
.to(bank1z3, 2, {opacity: 0.5, x:960, ease:Back.easeOut}, 6)
.to(bank1z2, 2, {opacity: 0.5, x:960, ease:Back.easeOut}, 6)
.to(tKennedy, 0.5, {opacity: 0},6)
.to(prijsbank1, 0.5, {rotation:360, x:960, ease:Back.easeOut}, 6)
 
.from(afgeprijsd, 1, {opacity:0, scale:0.01}, "-=2")
 
.from(chaisel1, 0.5, {opacity: 0.5, x:960, ease:Back.easeOut})
.from(tBrighton, 0.5, {opacity: 0}, 8)
.from(prijschaisel1, 0.5, {scale: 0.5, rotation:360, opacity: 0.5, x:960, ease:Back.easeOut})
.to(chaisel1, 2, {opacity: 0.5, x:960, ease:Back.easeOut}, 13)
.to(tBrighton, 0.5, {opacity: 0}, 13)
.to(prijschaisel1, 0.5, {rotation:360, x:960, ease:Back.easeOut}, 13)
 
.to(afgeprijsd, 2, {opacity: 0, ease:Back.easeOut}, 14)
 
.from(bank2z3, 0.5, {opacity: 0.5, x:960, ease:Back.easeOut})
.from(bank2z2, 0.5, {opacity: 0.5, x:960, ease:Back.easeOut})
.from(tBrooke, 0.5, {opacity: 0}, 16)
.from(prijsbank2, 0.5, {scale: 0.5, rotation:360, opacity: 0.5, x:-960, y:-200, ease:Back.easeOut})
.to(bank2z3, 2, {opacity: 0.5, x:960, ease:Back.easeOut}, 20)
.to(bank2z2, 2, {opacity: 0.5, x:960, ease:Back.easeOut}, 20)
.to(tBrooke, 0.5, {opacity: 0}, 20)
.to(prijsbank2, 0.5, {rotation:360, x:960, y:-200, ease:Back.easeOut}, 20)
 
.from(introductie, 1, {opacity:0, scale:0.01}, "-=2")
 
.from(hoek1, 0.5, {opacity: 0.5, x:960, ease:Back.easeOut})
.from(tChicago, 0.5, {opacity: 0}, 22)
.from(prijshoek, 0.5, {scale: 0.5, rotation:360, opacity: 0.5, x:960, y:-500, ease:Back.easeOut})
.to(hoek1, 2, {opacity: 0.5, x:960, ease:Back.easeOut}, 28)
.to(tChicago, 0.5, {opacity: 0}, 28)
.to(prijshoek, 0.5, {rotation:360, x:960, y:-200, ease:Back.easeOut}, 28)
 
.to(introductie, 2, {opacity: 0, ease:Back.easeOut}, 29)
.to(datum, 2, {opacity: 0, ease:Back.easeOut}, 29,5)
.to(premiere, 2, {opacity: 0, ease:Back.easeOut}, 30)
 
tl.restart();
Link to comment
Share on other sites

oke, can do...( you want the whole project? i'm working with adobe edge...and upgrade it with greensock in the code..

 

but i found some topic on your site, which work...

 

under my code, this code:

 

//create a repeating TimelineLite

var masterTimeline = new TimelineLite({onComplete:function() {
   masterTimeline.restart();
}});
 
//add 3 timelines to masterTimeline in direct sequence
masterTimeline.add(tl)
Link to comment
Share on other sites

yep , whole of Reduced version of your project ,

 

and try this :

var tl2 = new TimelineLite();
tl2.to("#blueBox", 1.5, {x:550})


var tl3 = new TimelineLite();
tl3.to("#blueBox", 1.5, {x:0})
tl3.to("#redBox", 1.5, {x:0})


var tlmaster = new TimelineLite({onComplete:function(){this.restart()}})
tlmaster.to("#redBox", 1.5, {x:550})
.add(tl2)
.add(tl3)

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

Link to comment
Share on other sites

First, nice job on the animation.

 

It appears to me that is repeating. 

I think Diaco's code sample above is really all you need if you want to nest timelines and have their parent repeat or be restarted.

 

I looked at your edge project and like Diaco noted, it contains way too much code to sift through.

We need a reduced test so that 

 

  1. we don't waste time reading code that isn't necessary to replicate the issue
  2. we don't have to sit through 20-30 seconds of animation in a foreign language to detect whether or not it is repeating or restarting correctly

 

I don't think your issue has anything to do with Edge. You have the animation part working fine. Please try to recreate the problem using CodePen as explained here: http://greensock.com/forums/topic/9002-read-this-first-how-to-create-a-codepen-demo/

 

You should be able to do it with just a few divs and a few tweens (similar to the solution Diaco suggested).

 

We are here to help, but in order to offer everyone the same quality support its important that we have simple demos to study. 

 

Thanks!

  • Like 2
Link to comment
Share on other sites

oke thanks for your kindness...

 

but the "restart" problem is solved...with this code below:

 

and you reply'd with a better solution...(

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

)

 

Many thanks...the gsap looks very good...hopefully i can put it in our wordpress site 

 

 

 

 

 

 

 

//create a repeating TimelineLite

var masterTimeline = new TimelineLite({onComplete:function() {
   masterTimeline.restart();
}});
 
//add 3 timelines to masterTimeline in direct sequence
masterTimeline.add(tl)
  • Like 1
Link to comment
Share on other sites

oke Carl, i understand it....

 

for now there isn't a problem..

 

maybe the experience to get it shorter...

when i have the time, i will try to put it in Codepen...i see that program continuously appear in this forum, looks good.

 

( for now i'm more a software user than code-user ) but i want to learn it.

 

Now i make the animation by putting an image at the right place...and the with the code let it move in or move out...

for me it isn't clear for now, how to do that in code...

 

But i give it a try, thanks a lot

Link to comment
Share on other sites

maybe, a stupid question...

 

should i be able to make the same animation without Adobe Edge?

 

 

( with "my first project" i've used Edge only for the positioning of the images... )

 

all of the rest was in code...so when i put my images online....(somewhere? dropbox maybe)

and when i used the same code.... with only changing the path of the images...i must getting the same result or not?

 

 

and that would be much easier to put on a website..

(Edge makes an .oam, there for we need a plug-in for wordpress to put our (.oam)animation in it.)

 

Sounds like a win-win situation...

 

 

Sorry when i sound as a dumb ass.... but these are my first steps in code-land ;-)

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