Search the Community

Hi, i'm trying to add a bit of animation to tags cloud. But i'm stuck with one issue. How can i keep child elements( tags ) inside parent container?

Hi, First I want to say I'm really happy that I'm using GSAP! it's wonderful .. Please check out my Pen ... Here we have 3 sets of elemnts and I want to stagger the 3 of them with a stagger time of sy 0.1s and simultaneously stagger the elemnts inside them .. right now the elements of the second block wont start their animation until the last elemnt of the previous block animates ... so basically I want to stagger 3 blocks of staggering elements, I don't want one block to wait until the previous one is done. and I have to start the whole function with $(".fade-scroll").each( ... so please don't suggest to change that also I dont want to use setTimeout function somehow by getting ".quick-info-item" and ... would be great I'll appreciate it very much if anyone could help me..

Is it possible for GSAP to do what I think. Because my idea is to let the Timeline go to a specific child (tweens inside/added to a timeline) and when that tween is finished animating, it will pause. Here's the code sample: HTML <div class="book"> <div class="last page"></div> <div class="page one"></div> ... <div class="cover page"></div> </div> <div id="prevPage"></div> <div id="nextPage"></div> JAVASCRIPT var book_timeline = new TimelineMax({ paused: true }) /* tween children */ .to('.page.cover', 0.4, { rotationY:'-180deg', transformOrigin:'0 0' }) .to('.page.one', 0.4, { rotationY:'-180deg', transformOrigin:'0 0' }) .to('.page.two', 0.4, { rotationY:'-180deg', transformOrigin:'0 0' }) .to('.page.last', 0.4, { rotationY:'-180deg', transformOrigin:'0 0' }); $('#nextPage').click(function(){ // code that animates only one (next page) tween inside a timeline then pause book_timeline.play(); }); $('#prevPage').click(function(){ book_timeline.reverse(); }); I want to use GSAP to make my own book flipping div's

Hey Jack, I came back here because of one little (or not) thing to repair and I would like to have your opinion about that. On the video below I have showed how the scaling reacts on the button (MovieClip with elements inside). http://youtu.be/IreHrg27uwM It goes wrong when I try to scale it from the handles you will see in the video. Element Button is a MovieClip which is containing background and textfield (not visible in the video, cause I have forgotten to enable it), Anyway I can't scale the Element Button like usually, because the background has to be redrawn to keep original radius corners or gradients and the text cannot be scaled always on the center of the button. What I did is: In the Main class where all elements are managed is: transformItem = transformManager.addItem(element); transformItem.minScale = 0; transformItem.minWidth = 20; transformItem.minHeight = 20; transformItem.addEventListener(TransformEvent.MOVE, onMoveElement, false, 0, true); transformItem.addEventListener(TransformEvent.FINISH_INTERACTIVE_MOVE, onMoveElementComplete, false, 0, true); transformItem.addEventListener(TransformEvent.SCALE, onScaleElement, false, 0, true) transformItem.addEventListener(TransformEvent.SELECT, onSelectElement, false, 0, true); transformItem.addEventListener(TransformEvent.DESELECT, onDeselectElement, false, 0, true); transformItem.addEventListener(TransformEvent.DELETE, onRemoveElement, false, 0, true); transformItemsArray.push(transformItem); While scaling the element I call updateProperties() method in the Element itself, this way I have always 'fresh' data. So in this case width, height, x, y, so the background can be drawn correctly. This is how the ButtonElement class look like. package { import fl.motion.Color; import flash.display.GradientType; import flash.display.Shape; import flash.events.Event; import flash.geom.ColorTransform; import flash.geom.Matrix; import flash.text.TextField; import flash.text.TextFormat; import nl.adlantic.adbase.adcreator.models.vo.AdCreatorButtonElementVO; import nl.adlantic.utils.FontManager; import nl.adlantic.utils.MathUtil; /** * * @author Grzegorz Tomasiak * @copy 2013 © AdLantic. All rights reserved. * */ public class AdCreatorButtonElement extends AdCreatorElement { private var textfield:TextField; private var textFormat:TextFormat; private var background:Shape; private var border:Shape; private var colorTransform:ColorTransform; private var properties:AdCreatorButtonElementVO; private var tempProperties:AdCreatorButtonElementVO; public function AdCreatorButtonElement() { createBackground(); createBorder(); createTextField(); addObjects(); } /** * * Override * */ override public function setProperties($properties:Object):void { super.setProperties($properties); properties = $properties as AdCreatorButtonElementVO; if (properties) { updateBackground(); updateBorder(); updateTextField(); } } override public function updateProperties($properties:Object):void { super.updateProperties($properties); tempProperties = new AdCreatorButtonElementVO($properties); for (var prop:Object in $properties) { if(properties.hasOwnProperty(prop)) properties[prop] = tempProperties[prop]; } updateBackground(); updateBorder(); //updateTextField(); } /** * * Methods * */ private function createBackground():void { background = new Shape(); colorTransform = new ColorTransform(); } private function createBorder():void { border = new Shape(); } private function createTextField():void { textFormat = new TextFormat(); textfield = new TextField(); textfield.multiline = true; textfield.wordWrap = true; textfield.selectable = false; textfield.setTextFormat(textFormat); } private function addObjects():void { addChild(background); addChild(border); //addChild(textfield); } private function updateBackground():void { var matrix:Matrix = new Matrix(); matrix.createGradientBox(properties.width, properties.height, Math.PI / 2); background.graphics.clear(); background.graphics.beginGradientFill(GradientType.LINEAR, [properties.background_color, Color.interpolateColor(properties.background_color, 0x000000, .5)], [1, 1], [0, 255], matrix); background.graphics.drawRoundRect(0, 0, properties.width, properties.height, properties.radius); background.graphics.endFill(); this.scaleX = 1; this.scaleY = 1; textfield.scaleX = 1; textfield.scaleY = 1; trace(this.x, this.y); } private function updateBorder():void { var matrix:Matrix = new Matrix(); matrix.createGradientBox(properties.width, properties.height, Math.PI / 2); border.graphics.clear(); if(properties.border_thickness > 0) { border.graphics.lineStyle(properties.border_thickness, 0, 1, true); border.graphics.lineGradientStyle(GradientType.LINEAR, [properties.border_color, Color.interpolateColor(properties.border_color, 0x000000, .5)], [1, 1], [0, 255], matrix); border.graphics.drawRoundRect(properties.border_thickness / 2, properties.border_thickness / 2, properties.width - properties.border_thickness, properties.height - properties.border_thickness, properties.radius); border.graphics.endFill(); } } private function updateTextField():void { textFormat.color = properties.format.color; textFormat.font = properties.format.font; textFormat.size = properties.format.size; textFormat.align = properties.format.align; textFormat.bold = properties.format.bold; textfield.text = properties.text; textfield.width = properties.width; textfield.height = 20; if (FontManager.instance.isFontEmbedded(properties.format.font)) textfield.embedFonts = true; else textfield.embedFonts = false; textfield.setTextFormat(textFormat); textfield.y = background.height / 2 - textfield.height / 2; } } } My question is, do you already know what's the problem and how to possibly fix it or you have advices to to that thing differently. Any help would be awesome. Thank you.