Jump to content

Search the Community

Showing results for tags 'append'.

More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • HTML5 / JS
    • GSAP
    • Banner Animation
    • Jobs & Freelance
  • Flash / ActionScript Archive
    • GSAP (Flash)
    • Loading (Flash)
    • TransformManager (Flash)

Product Groups

  • Club GreenSock
  • TransformManager


There are no results to display.

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start





Website URL







Found 9 results

  1. **See Codepen URL** I'm trying to create a simple sequence that fades out "Test" after 4 seconds, and then fade out "Rest" after 2 seconds. "Best" will remain. When I append outside of the "if" statement, the sequence works—but inside of the statement—it does not register. I am able to detect as existing all of the elements (div, array, timeline object, etc) in the statement with the console log. It appears though that appending a sequence from an embedded "if" statement will not work. It has to be done on the root level with the Timeline object. Is this correct? Or is there a way to make this work with my current setup? (I've added notations to the code.) Thanks!
  2. Hi all, I am doing an interactive exhibit for my school's graduation showcase. In one of the exhibit, I implemented Tracking.js, which could detect colours using a webcam. The effect I want to apply is that, once the webcam detect a specific color, it will append the empty h1 and p tags conditionally (example: if detect Red, append h1 to Header A and p tag to Text A, if detect Blue, append h1 to Header B and p tag to Text B). I use jQuery's .text() function to edit the empty h1 and p tags once it detects a colour. However, the effect is quite abrupt. Is there anyway to use GSAP to animate it? P.S: In the CodePen, I did not put in Tracking.js as CodePen could not access the webcam. I used the .click function to show the .text() abrupt effect I was referring to.
  3. Hi, Each time I click on the button, I add a new (.box) in the list but I want to smooth the position of the others boxes (see my codepen) and still get the content vertically centered. As you can see I used flexbox. Thanks for the reply.
  4. Hello, The code : http://codepen.io/hemels/pen/WQGqLB I'm working on project with draggable and works perfect, BUT i cant get one thing working. After you drag a div over a grid of divs the draggable div is append to the cell from the grid. This works fine. But when you drag the div for the second time, the div has to be 'de'-preppend (works) only its on the wrong position. I guess its the transform that needs to be reset. But what ever i try i cant get the result i want. There must be a simple sollution somehow, but after 2 hours of try and error i ask... Thanks for the great software and the support ! gr Mels
  5. Hi all, I'm a noob here and have really been enjoying creating awesome experiences with GreenSock! However, I'm trying to get past an issue that you might be able to help me with. After a tween of a container width, I'm trying to add an inline div to the newly created space. The new div does not immediately get added to the space. On the next add action (that creates additional container width), the previously created div appears. Am I hooking the wrong method? Thanks! TweenLite.to($('.list-item-container'), 1, { width: $('.list-item-container').width() + 253, delay: 0.25, onComplete: function () { var _item = document.createElement('div'); $(_item).addClass('list-item'); $('.list-item-container').append(_item); } });
  6. Here is my full script: <script> $(document).ready(function() { var controller = $.superscrollorama(); //This code snippet is built on the parallax example: controller.addTween( '#gun', (new TimelineLite()) .append([ TweenMax.fromTo($('#hammer'), 1, {css:{rotation: 0}, immediateRender:true}, {css:{rotation: -25}, ease:Quad.easeInOut}), TweenMax.fromTo($('#trigger'), 1, {css:{rotation: 0}, immediateRender:true}, {css:{rotation: 40}, ease:Quad.easeInOut}) ]), 500, // scroll duration of tween 200); // offset? }); </script> What I need to know is... how can I add a tween to this timeline? I just need to know how to add tweens after the one I already have. Everything I have tried does not work.
  7. THIS THING IS DRIVING ME MAD .. PLEASE HELP ! var w = 25; var timeline = new TimelineMax(); var mc1 = new TweenMax(); var mc2 = new TweenMax(); timeline.add( [ mc1.to($('#selector'), 10, {backgroundColor:'red'}), mc2.to($('#selector'), 2.5,{width: w+"%", onComplete: function(){ timeline.pause() }}) ],0,0); // so currently the animation pauses at 2.5 secs instead of 10 // how do i alter mc2's tween now that it has finished, with it staying in the same timeline // I tried this .. (it doesnt work) timeline.append( mc2.updateTo($('#selector'), 5, { width: "50%", onComplete: function(){ timeline.pause()} }, false) );
  8. It seems that with out the repeating tweens the timeline will report the total duraiton as "3" which is accurate .. but when including the repeating tweens the timeline reports it as "1000000000000" .. which prevents me from using the append method, is there a way around this? Here is the code var intro_tl = new TimelineLite({onComplete:initScrollAnimations}); intro_tl .addLabel('outer-ring', 0) .addLabel('ring1', .5) .addLabel('ring2', 1) .addLabel('ring3', 1.5) .from( $('#db-ring'), 1.5, { ease:Quad.easeIn, css:{opacity: 0} }, 'outer-ring' ) .insert([ TweenMax.from( $('#db-outer-ring1'), 1.5, { ease:Quad.easeIn, css:{opacity:0} } ), //TweenMax.from( $('#db-outer-ring1'), 20, { repeat:-1, ease:Linear.easeNone, css:{rotation:360} } ) ], 'ring1') .insert([ TweenMax.from( $('#db-outer-ring2'), 1.5, { ease:Quad.easeIn, css:{opacity:0} } ), //TweenMax.from( $('#db-outer-ring2'), 40, { repeat:-1, ease:Linear.easeNone, css:{rotation:-360} } ) ], 'ring2') .insert([ TweenMax.from( $('#db-outer-ring3'), 1.5, { ease:Quad.easeIn, css:{opacity:0} } ), //TweenMax.from( $('#db-outer-ring3'), 30, { repeat:-1, ease:Linear.easeNone, css:{rotation:360} } ) ], 'ring3') ; console.log( intro_tl.totalDuration() );
  9. Is there a way to have reverse appended to the timeline? I'm trying to make a typewriter effect, so when the letters are typed out, it'll reverse it, and type a new sentence. Kind of like you're backspacing the sentence.