Jump to content
GreenSock

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

Search the Community

Showing results for tags 'element'.

  • 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 11 results

  1. reference: https://greensock.com/docs/Utilities/Draggable/hitTest var element1 = green; var element2 = red; if (Draggable.hitTest(element1, element2)) { console.log('HIT!'); } #green { transform: rotate(45deg); } Always triggers HIT! everytime element1(green) enters the area demonstrated as "blue box" even if it doesn't hit element2(red) demo: see attached image Is there any possible way to fix this issue as I wanted to trigger 'HIT!' only when green touches red (given that I want to rotate this image/div), Thanks in
  2. Hi, I stumbled across a website that is using GSAP (TweenMax, based on Wappalyzer) to animate its elements, and I found one specific animation really interesting. If you visit the website in Desktop (http://thieb.co) and arrive at the home page, click one of the projects and you'll be brought into the specific project page. If you see carefully, the project title animates from the home page position to the project page position, and the URL changes. But the project title element is still the same. I was just trying to figure out how to do this a
  3. I am having some troubles with the document.querySelectorAll() because, I don't know why, it doesn't work when I add more than one class or ID. So, this is what I want to achieve: http://codepen.io/sonder15478/pen/PpJqKN But there's a lot of code that I wouldn't need if I use document.querySelectorAll(). This is where I get stuck: http://codepen.io/sonder15478/pen/xqXGXm I also tried with getElementsByClassName(), but it didn't work either... Any ideas? Thank you!
  4. Hi, I am creating a responsive animation where there's an image on the background and some elements of it are animated. For example, I would like to move a cloud 20% of the screen width, but with the code that I have, it's moving it but of a 20% of the cloud width. Does anyone know how to do it of the screen width instead of the cloud width? This is my code: TweenMax.to('#cloud', 5, { x:"20%", ease:Power1.easeInOut, yoyo: true, repeat:-1 });
  5. I have animated an element's attribute using TweenMax like this: TweenMax.to($(".element"), 2, { rotation : 180 }); Later on, I need to get the value of the rotation, is it possible? Something like this: TweenMax.getValue($(".element"), "rotation"); // just an example How can I get the value of an attribute animated by TweenMax?
  6. hi, i have made in this draggable rotating Throwprops star test file in the codepen. i wonder if it is possible to put a star shaped graphic (a PNG with transparent background) overtop of the star shape while maintaining the star as the SVG trigger element.
  7. FYI the issue was on Chrome with Windows too, but it happens 100% of the time on OSX Chrome I have a ~30 second long timeline. I trigger a play and pause event depending on where you are on the page. If the animation is in view, it plays, if not, it pauses. I was having an issue where on the footer of my page certain elements would disappear for some unknown reason. So I did around 2 hours of figuring out what it was, and I narrowed it down to some CSS animations I left looping (unrelated to GSAP). That made sense, it was performance draining and so the browser started to glitch. So in
  8. Hi i'm trying to create stagger effects on my app dashboard, but the problem is i follow all the documentation guide lines, but there is no way to create Stagger that trigger different directions. only the given parameters and all object stag to the same pattern, but i need to stagger it from different directions. eg : Use case scenario that i'm trying to archive. 1). Top bar comes in document top position 2). Sidebar comes in right side 3). Body element comes in bottom and so on.. i know i can use Timeline Max for this situation, but i need to create this from stagger Eff
  9. 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
  10. How would you clear all CSS properties that were applied to an animation element by TweenMax? var tween = TweenMax.to($image, 5, {css:{ scale:1.5 }, ease: Linear.easeInOut, onComplete: function(){ tween.invalidate().progress(0); } }); I basically want to reset or clear all CSS properties that TweenMax adds to the inline style tag. So i can get the element back to its original state before it was animated by TweenMax. I was testing with tween.invalidate() .. but I was unsure if this was correct? Thank you for any help!
  11. Hey folks, maybe it's that I am blind, or just an idiot, but how can I get the moment when the last element of the (staggerTo) array starts tweening? I tried getTweensOf and all kinds of workarounds, but I failed My example: TweenMax.staggerTo(stepArray, tweenSpeed, {alpha:1, scaleX:1.5, scaleY:1.5, dropShadowFilter:{blurX:15, blurY:15, distance:5, alpha:0.33}, ease:Cubic.easeInOut, onComplete:tweenScaleDown, onCompleteParams:["{self}"]}, stepStaggerAmount); Sorry if that's a dumb question, but I tried stuff for hours now and cant get it. TIA, Lasercode
×