Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...

Search the Community

Showing results for tags 'dom'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • GreenSock Forums
    • GSAP
    • Banner Animation
    • Jobs & Freelance
  • Flash / ActionScript Archive
    • GSAP (Flash)
    • Loading (Flash)
    • TransformManager (Flash)

Product Groups

  • Club GreenSock
  • TransformManager
  • Supercharge

Categories

There are no results to display.


Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


Personal Website


Twitter


CodePen


Company Website


Location


Interests

Found 18 results

  1. Am getting a issue here return ( <Box display='flex' flexDirection='column' > <Box display='flex'> <Button onClick={() => { lstore.open = !lstore.open; const domNode = lstore.collabeRef.current; const h = lstore.open ? domNode.scrollHeight : 0; if (lstore.open) { // if proceed opening gsap.to(domNode, 0.3, { height: h, opacity: 1 }) .eventCallback('onComplete', () => { domNode.style.height = '100%'; }); } else { // here the issue, if node have with 100% , animations not work
  2. GreenSock

    CSSRulePlugin

    Allows GSAP to animate the raw style sheet rules which affect all objects of a particular selector rather than affecting an individual DOM element's style (that's what the CSSPlugin is for). For example, if you have a CSS class named ".myClass" that sets background-color to "#FF0000", you could tween that to a different color and ALL of the objects on the page that use ".myClass" would have their background color change. Typically it is best to use the regular CSSPlugin to animate css-related properties of individual elements so that you can get very precise control over each object, but
  3. Hello there! I'm a bit newbie in a GSAP animation exactly. And I'll start with a simple example to understand my expectations. For example, if I'll create the element like this const elem = document.createElement("div"); it is not in DOM for now, but I can apply animation on it so far TweenMax.to(elem, 1, { x: 300 }); and it will start immediatly. So, when this element will be appended into DOM (after 1 sec passed), it will have its `transform: translateX(300px);` If this element appends while tweening we'll see it moving from some middle point. The v
  4. Hi! I would like to make a snowing animation with one or two inline svg snowflakes and I made a pen with a small success :) Is it possible to multiply the inline svg snowflakes with JS to animate them? Or how could I solve this problem? Thanks, szsoma
  5. Hi everyone! I'm Jos from the The Netherlands, entrepreneur and full-stack developer (web design, illustration design, motion graphics / animation, front-end development, back-end development). I've been following Greensock / GSAP occasionally in the past 12 months, but I haven't began actively animating using GSAP until recently. So here I am! The last few weeks I've spent quite some time researching which development workflow / stack / IDE / platform best suits my needs for animating the DOM & SVG, yet unfortunately I haven't found a proper solution. Can you help me find one? What I d
  6. In this demo I'm noticing a significant performance hit / choppiness when the animation first runs (click one one boxes). After that, every subsequent animation runs much smoother. I've noticed similar behavior in other projects when I'm manipulating the dom using tween max. Any ideas what can cause this / how to make it go away? Running this on a new macbook. Thanks.
  7. Hello! Based on the rotation property of the wheel, I'd like to change the HTML content based on the segment that it lands on. I've used the rotationSnap var but I'm unsure how to call it's value based on the end position to then alter the HTML. I'd also ideally like to set-up each segment as a separate div so I can then easily place content into them such as the title of the colour etc. I'm fairly new to GSAP (and js to some extent) so I would like a bit of guidance on how achieve this. Many thanks!
  8. OK, so I've properly enqueued TweenMax.min.js in my Wordpress install, in my child theme's functions.php file. It's loaded, as a check of the page shows. Just to make sure it's working, I added this test code to a page's footer code: <script type="text/javascript"> var blinkText = document.getElementsByClassName("blinking"); function blink() { TweenMax.to(blinkText, 0.3, { autoAlpha: 0, delay: 0.3, onComplete: function() { TweenMax.to(blinkText, 0.3, { autoAlpha: 1, delay: 0.3, onComplete: bl
  9. Hi guys! I have the following problem: There is a draggable with attached methods onPress and onRelease. The draggable component has a button child. When I click on the draggable but outside of the button both events get fired. But when i click on the button only the onPress event gets fired (you can check this in the browser console). Same result happens if I put an input as a child and click on it. Codepen: http://codepen.io/anon/pen/jqqyEQ I need a way to fire both onPress and onRelease events when I click on buttons and inputs that are children of the draggable component.
  10. Hi, I've been using the TimelineMax library to animate navigation tabs that are loaded via AJAX. The problem that I am facing is that elements that are newly added to the DOM aren't animated, as they haven't been detected when the Timeline was created. Playing the timeline from the start has no effect especially .from() animations The linked codepen demonstrates my problem although I have replaced the AJAX call with a html load function. Thanks in advance
  11. I'm using staggerTo to animate a class of elements in sequence. As in: TweenMax.staggerTo(".myClass", 1, {opacity:0}, 0.2); And that works fine -- except that it always animates the elements based on their sequence in the DOM. ie: The elements that are first-defined are first to animate. Is there a parameter to reverse that sequence? I feel like there should be an easy way to accomplish this without using a timeline -- but maybe not.
  12. Hi all, Fairly new to the whole javascript tweening animation business. I've included a fairly complex svg file in a website I'm working on via an <object> tag and am using GSAP to animate it. //GSAP tweening/animation STUFF $(document).ready(function(){ var svg = document.getElementById("homeAnimation"); var svgDoc = svg.contentDocument; var homeSwitch = svgDoc.getElementById("homeSwitch"), homeSmallGear = svgDoc.getElementById('homeSmallGear'), homeBigCog = svgDoc.getElementById('homeBigCog'), homePipeBall1 = svgDoc.getElementById('homePipeBall1'), homePipe
  13. Hi guys, today i was trying to reproduce a kind of fountain effect made of div with the following concept: Create a javascript array Push a div into the array Initialize its position with css wherever you want Move the dive like a water spurt Repeat with setInterval Well as you can see it's quietly easy, not that complicated but i was wondering how can i realize the fountain effect? well i mean, which kind of function do i have to use to give my animation this effect? Here's an example of what i'm trying to reproduce. http://cssdeck.com/labs/html5-canvas-fountain-exploding-particles-with-
  14. Hi, Here my problem, I use a small semantic template engine (transparency) and I can't make my TimelineMax works on elements that being templated. I guess I done something wrong, but I don't manage to make work my "staggerTo(.MyClass)" that is into my timeline and don't find any fonction to reload the selector or something like that. I give you a codepen of the problem. If any of you have sugestions Allan
  15. I know that it might be hard (if not outright impossible) to achieve what I want, but gsap always surprises me (I used it back in as3) that I think it's worth it to ask. Is it possible to animate a div parent exclusive of the child? What I mean by this is let's say I have a div like so: <div style="colored-rectangle"> <p>My Content</p> </div> See the div is a 'colored-rectangle'. I want to animate my text and the colored rectangle separately from each other. I'm using TweenLite.from();, and I want my text to appear from the top while the div comes in from
  16. What are the main advantages to using canvas rather than moving around divs?
  17. Up to this point I have animated everything as a DOM element, but I always want to push the performance of my game more and more, so I have started to look closer at canvas. I am curious about what kind of performance gain I can expect from animating a cached javascript element vs an element on a canvas. Any resources, insights, or experiences on this topic would be greatly appreciated.
  18. 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, del
×