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. 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 sometimes it can be useful to tween the global rules themselves instead. For example, pseudo elements (like :after, :before, etc. are impossible to reference directly in JavaScript, but you can animate them using CSSRulePlugin as shown below. See the Pen CSSRulePlugin by GreenSock (@GreenSock) on CodePen. Learn more in the CSSRulePlugin documentation. To learn how to include the CSSRulePlugin into your project, see the GSAP install docs.
  2. 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 // i also try From and domNode.style.height = domNode.scrollHeight+'px' not work gsap.to(domNode, 0.3, { height: 0, opacity: 0 }); } gsap.fromTo(domNode, 0.5, { translateX: -100 }, { translateX: 0 }); }} > {title} </Button> </Box> <Box ref={lstore.collabeRef} > {children} </Box> </Box> ); after the event onComplete fired the following code `gsap.to(domNode, 0.3, { height: 0, opacity: 0 });` no longer works and there are no more animations. how i can animate height 100% to 0% or 0px ? i also try hacky way like just before perform this domNode.style.height = domNode.scrollHeight+'px' just before the animations , but not work ! thanks
  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 very simple example is in CodePen applied. Is there a way to make some performance on elements, that are not in DOM for right now, i.e. hold the animation until the element appears on the screen? Some kind of holding animation request until appending or smth. similar. Hope, my explanation is well. Best regards, Nick Rimer UPD: I solved this case with a combination of `pause` property and `document.body.contains(elem)`. Saving animation first: const anim = TweenMax.to(elem, 1, { x: 300, paused: !document.body.contains(elem) }); Run animation when element will appear: anim.play(); But I don't know if this solution is awful/great/the best. Maybe you'll find the most efficient and elegant way. CodePen was updated. UPD2: Want to point out that the aim is to understand are there any performances on start of the animation I not needed to start right now? I really don't wanna to start even calculate something, if the animation starts not in time (there may be several animation at one time or smth. else). But to start animate, when the element appears. So I don't really understand will the solution with `paused: true` helps or not.
  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 do know is the following, I want to keep using: my Adobe Creative Cloud subscription: Photoshop for bitmap design/editing, Illustrator for vector / SVG design, After Effects for motion graphics video (or for DOM/SVG animation would that be possible, I like AE's IDE), and maybe Adobe Animate CC (yet there doesn't seem to be a way I'm aware of for animating the DOM, only HTML Canvas, feel free to correct me if I'm wrong). Bye Adobe Edge Animate, you seemed to be a promising platform to me, but alas ... CSS for DOM-styling and simple CSS Transitions (simple hover effects on hyperlinks, buttons etc.); jQuery, (primarily) as selector engine and client-side form validator; GSAP for DOM & SVG animation. GSAP absolutely rocks! Although I'm primarily developing on an iMac5k now, I used to primarily work on a 2011 model MacBook Pro + Thunderbolt Display, and GSAP is and was the only animation software environment that didn't trigger the MBP's ventilator to behave like an aeroplane taking off! :-P Coding in GSAP using TweenMax / TimelineMax suits me fine for "relatively simple" animations; I'm not a GSAP-expert yet but as I gain experience I'll be fine coding the simple stuff I guess. However... wouldn't it be nice to be able to use GSAP in a proper IDE that looks like Adobe After Effects CC / Animate CC? With a proper multilevel visual timeline, property boxes, designer tools AND code development tools all integrated in one IDE! Also, looking at current SVG animation projects "out there in the wild" (by all animators worldwide I mean, not just myself), I've noticed almost every DOM- / SVG- / web animation lacks "object / path deforming". Compared to Adobe After Effects for video motion graphics, where path deforming of a character for example can be done using AE's "puppet tools", DOM- / SVG- animation for the web has a long way to go, I reckon! Yet, (although I haven't used it yet) MorphSVGPlugin seems to be suitable to some extent for path deforming, but it's hardly doable to switch over back-and-forth between GSAP and Adobe Illustrator for every little object/path addition to the SVGs. Scene staging is very hard as well using just GSAP coding. What are your insights on this matter? Are there proper IDEs out there I've missed? Can I indeed use Adobe Animate CC / After Effects CC running "embedded GSAP"? Is GreenSock developing their own DOM/SVG animation IDE? Thanks for your reply in advance. -Jos
  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: blink }); } }); } blink(); </script> When this page loads, the text doesn't blink and the DOM inspector shows an error, reporting "Uncaught ReferenceError: TweenMax is not defined." I don't have much JS experience, but obviously I've missed something simple, and obvious. Can someone help me out here? TIA! SOLVED: Ach, what a pain. It was just a case of script loading and timing. I changed the example code to what I pasted in below, and it works fine in WP, via the OH Add Script Header Footer plug. This plug makes it simple to add things like GSAP scripts on a per-page basis without having to create separate files in the WP child theme. <script type='text/javascript'> // wait until DOM is ready document.addEventListener("DOMContentLoaded", function(event) { // wait until window is loaded (images, stylesheets, JS, and links) window.onload = function() { //fade out and set visibility:hidden TweenMax.to(blinking, 2, {autoAlpha:0}); //in 2 seconds, fade back in with visibility:visible TweenMax.to(blinking, 2, {autoAlpha:1, delay:2}); }; }); </script>
  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. Thanks in advance!
  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'), homePipeBall2 = svgDoc.getElementById('homePipeBall2'), homePipeBall3 = svgDoc.getElementById('homePipeBall3'), homePipeBall4 = svgDoc.getElementById('homePipeBall4'), homeBeltGearLeft = svgDoc.getElementById('homeBeltGearLeft'), homeBeltGearRight = svgDoc.getElementById('homeBeltGearRight'), homeChart = svgDoc.getElementById('homeChart'), phoneChart = svgDoc.getElementById('phoneChart'), phonePie = svgDoc.getElementById('phonePie'); var tmax_home_switch = new TimelineMax(); //Switch has separate timeline so it can pause the animation but still move. var tmax_home_chart = new TimelineMax({repeat:-1}); //Chart has separate timeline so it can repeat. var tmax_options = { }; //options config goes here var tmax_home_tl = new TimelineMax(tmax_options); //timeline takes options input and is declared var tmax_repeat_options = { }; //options config goes here var tmax_home_t2 = new TimelineMax( tmax_repeat_options); //timeline takes options input and is declared //Clear the stage tmax_home_tl.set([homePipeBall1, homePipeBall2, homePipeBall3, homePipeBall4], {opacity:0}); tmax_home_tl.set(homeChart, {x:-20}); tmax_home_tl.set(phoneChart, {scale:0, transformOrigin: "center center"}); tmax_home_tl.set(phonePie, {scale:0, transformOrigin: "center center"}); //starts off paused tmax_home_tl.pause(); tmax_home_t2.pause(); tmax_home_chart.pause(); // mouseover cursor change. homeSwitch.addEventListener("mouseover", funcover, false); function funcover() { homeSwitch.style.cursor = "pointer"; } homeSwitch.addEventListener("click", function() { tmax_home_switch.to(homeSwitch, 0.2, { rotation: 60, repeat:0, delay:0.2, transformOrigin: "center center"}) .to(homeSwitch, 0.1, { rotation: 0, repeat:0, delay:0, transformOrigin: "center center"}); tmax_home_tl.paused(!tmax_home_tl.paused()); tmax_home_t2.paused(!tmax_home_t2.paused()); tmax_home_chart.paused(!tmax_home_chart.paused()); if(tmax_home_tl.set([homePipeBall1, homePipeBall2, homePipeBall3, homePipeBall4], {opacity:1})) { TweenMax.set([homePipeBall1, homePipeBall2, homePipeBall3, homePipeBall4], {opacity:0}); } }); tmax_home_chart.to(homeChart, 0.25, { x:50, transformOrigin: "center center"}, 8) .to(homeChart, 0.5, { y:26, transformOrigin: "center center"}) .to(homeChart, 20, { x:500, transformOrigin: "center center"}); tmax_home_tl.staggerTo([homePipeBall1, homePipeBall2, homePipeBall3, homePipeBall4], 0.5, { opacity:1 }, 3.4) .staggerTo([phoneChart, phonePie], 0.5, { scale:1, transformOrigin: "center center"}, 0.5); tmax_home_t2.to(homeSmallGear, 4, { rotation: 360, repeat:-1, ease: Power0.easeNone, transformOrigin: "center center"}, "cogs") .to(homeBigCog, 8, { rotation: 360, repeat:-1, ease: Power0.easeNone, transformOrigin: "center center"}, "cogs") .to([homeBeltGearLeft, homeBeltGearRight], 8, { rotation: 360, repeat:-1, ease: Power0.easeNone, transformOrigin: "center center"}, "cogs+=4"); }); There is the code all the elements being selected are definitely in the SVG file that is being imported. It seems to randomly work and other times not. Any suggestions? I'm getting a "Uncaught Cannot tween a null target." in Chrome but it works fine in Firefox and sometimes IE. Here is the bones of the site: http://www.mulrooneydesign.com/apps/infov4/ I'm guessing that the GSAP code is firing before the SVG DOM is instantiated any way to avoid this happening? Also any critique of my code generally is more than welcome. B
  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-gravity Note: the previous example is realized using a canvas, i'd like to reproduce it without canvas, only using divs, jquery and the TweenLite library. TL DR: Which is the function i should use to reproduce something like that: http://cssdeck.com/labs/html5-canvas-fountain-exploding-particles-with-gravity using the TweenLite library?
  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 the bottom. Thanks!
  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, delay: 0.25, onComplete: function () { var _item = document.createElement('div'); $(_item).addClass('list-item'); $('.list-item-container').append(_item); } });
×