2

I am creating small little animations using pure CSS similar to those in codepen.io At the moment, those animations have their own html/css. I would love to chain them together to create a seamless cinematic experiment.

What will be the best way to chain them together and trigger a package(CSS/HTML) after the other?

eg: Once animation A (lorem.css/lorem.html) is finished, it will trigger animation B which is (ipsum.css/ipsum.html)

I would love to keep them separated for ease of management.

I am wondering whether we could use Handlebars.js for this? Since the differences between each HTML file is the body tag. So can I just template the body tag of each HTML file and then swap it out to the next body block when the current animation has ended?

Thanks.

Vennsoh
  • 4,853
  • 5
  • 26
  • 41
  • @Vennosh Are we talking about different `html` files that contain `html, body, head, title, etc.`? – hitautodestruct Dec 02 '13 at 13:58
  • @hitautodestruct the html will be different for each file (just within the tag though) I am wondering if handlebars.js will be useful in this instance? – Vennsoh Dec 02 '13 at 21:15
  • So, you will be pulling these `html` snippets in via ajax? – hitautodestruct Dec 03 '13 at 07:43
  • I am not sure, I am pretty new with front-end. I am looking for the best way that will result in smooth animation without some weird lags or delays. The idea suggested by one of the person below seems feasible. – Vennsoh Dec 03 '13 at 09:12

4 Answers4

2

You could listen to ontransitionend event of css3 animations with javascript. Then apply the new animation class to the element.

Michael Tempest
  • 814
  • 7
  • 12
  • Thanks to your comment, I have found a good article on how to detect css3 animations/transitions when they have ended using jquery. http://blog.teamtreehouse.com/using-jquery-to-detect-when-css3-animations-and-transitions-end – Vennsoh Dec 03 '13 at 02:21
0

yes there is ontransitionend event fired on the element that is animating and this also has vendor prefixed events for webkit and opera. You then can see what animation this event corresponds to by looking at

event.originalEvent.propertyName
alfonsob
  • 635
  • 1
  • 6
  • 16
0

just for sake of smoothness , you can load all the html in different layers . and stack them on top of each other z-index,hide ones that are not needed to be shown , once you want to show any layer with the html , and attach the css , use .show() and append the css file to your current html file using <link href="your css file URL" rel="stylesheet" type="text/css" /> , i think this will work very smoothly.

ProllyGeek
  • 15,517
  • 9
  • 53
  • 72
  • So if I understand this correctly, you mean for each different html file, I can wrap the body content in a div. And put all these divs in the same html file and stack them using z-index. Show and reveal the current animation and hide the others. Depending on which html file that is currently showing, we will trigger the appropriate css file? – Vennsoh Dec 03 '13 at 02:18
  • yes exactly , but replace trigger css file , with attach css file – ProllyGeek Dec 03 '13 at 02:24
  • 1
    Sweet... this sounds feasible, I will give this a try tonight and let you know the outcome. – Vennsoh Dec 03 '13 at 02:27
  • 1
    By the way, I forgot to mention, I use display:none/block to reveal my html content. – Vennsoh Dec 03 '13 at 14:10
0

U should use some JS for this, and the good thing is ;) U don't need jquery for this.

u can just listen to (eventlistener): (don't mind the notation, just copied it from my own manager)

'WebkitTransition':'webkitTransitionEnd',
'MozTransition':'transitionend',
'OTransition':'oTransitionEnd otransitionend',
'msTransition':'MSTransitionEnd',
'transition':'transitionend'

depending on the browser, same goes for animationend

element.addEventListener("transitionend", function(){
  //do whatever
},false);

or create some function to detect the browser automaticly, create a variable for it, and add that to the even listener. ( i recommend , modernizr way of doing this)

This way u can just create a cssclass, containing the animation properties, and add it to the element, when the animation /transition is completed it triggers and ending.

So the idea, would be to create some kind function/manager that removes the class at ending, and adds the next one to the same element, or next element after that.

sidenote: when u do something like add padding for some reason (padding-top/padding-left) within or animation, (its just an example) it will detect 2 endings and not just one for adding "padding" (atleast thats what chrome does, forgot what browser version though, u have to play with it a bit)

please take a look at my answer over here for a full explanation CSS3 Chain Animations

Community
  • 1
  • 1
Danillo2k
  • 11
  • 3