Jump to content

Ron Itelman

  • Posts

  • Joined

  • Last visited

Posts posted by Ron Itelman

  1. Hello, I want to loop an object by an additional 140 px every second. This moves the element by 140 pixels, but then resets every second instead of moving from the current position. Any help is appreciated thanks!

    gsap.to(table, {duration:1, x:"-=140", ease:"none", repeat:-1});

    • Like 1
  2. Hello, looking at the api, the only kill function requires me to know which tween I wish to kill: https://greensock.com/docs/v3/GSAP/gsap.killTweensOf()

    However, I have single page app and if a user were to click around before an animation is completed the animation continues (which doesn't make sense to the user). I would like to kill all running animations on any new view the user selects, without having to hard cord (and know in advance) every single possible set of animations I would need to kill.  Is there anyway to do this? This site is for demo purposes / prototyping only internally to our company so I'm focused on whatever is easiest as possible to not get random animations running as a user clicks through. Any suggestions are appreciated both in quick fixes or programmatic paradigms!

  3. Thanks, it is for a work project, so hard to share code without spending a lot of time formatting, but that being said, I really love your product (and your support is fantastic too 😀) but I'd like to help. Currently I'm slammed preparing for a presentation and have two sick kiddos at home so I don't want to make a promise I won't be able to keep. Also - as the project uses GreenSock I'll probably need to inquire about commercial licenses and mapping out any issues is probably a good thing for all. I will be using more GreenSock features to illustrate data visualization and animations so you will most likely be seeing more posts as I try to get ready for the presentation ;)




    • Like 2
  4. Ok good news: if I change the scrolling element to a wrapper (versus the window) it DOES work. So A - there's a solution, and B - if someone else has this problem, a solution was posted.

    Works:  gsap.to(wrapper, {scrollTo:"#test", duration:1});

    Fails:  gsap.to(window, {scrollTo:"#test", duration:1});

  5. Hello - here's the pen, and it works perfectly on CodePen, which on one hand is good, on the other, it is of course frustrating! Not sure where the conflict is in my dev environment. Anyway, thank you for the fantastic response time in trying to help! I will try to sort this out and isolate what is happening on my system and will post the solution (if I find it, sigh)

    See the Pen RwPMvQv by ron-itelman (@ron-itelman) on CodePen

  6. Trying a positive value does nothing as well (below).  I literally am just trying  to demonstrate that I can use gsap scrollTo on my window object. As you said putting this on codepen will help, I can put the exact same code below, would be surprised if this didn't work on codepen. Anyway, I will try to find out what is happening, and will post the codepen link soon. If there is any other simple test I can do, let me know.

    gsap.to(window, {duration:0.8, scrollTo:{y:200}});

  7. I am wondering if the plugin is not activated somehow. The code is so basic. Is there a test 'ping' I can run with other plugins to verify if there's an issue? I am using the latest version, 3.2.4.



  8. Hi - just migrated to v3, and not sure what I'm doing wrong, here's the code that works in one version, but not the other. It is the second one, the one that fails, that I want.


    wis.slideToTopOfViewport = function(slideNum, wrapper) {
        let targetElem = wrapper.querySelector(`.slideW[data-filename="Slide${slideNum}"]`);    
        console.log(targetElem); // works

        gsap.to(targetElem, {duration:0.4, y:-200 }); //works



    wis.slideToTopOfViewport = function(slideNum, wrapper) {
        let targetElem = wrapper.querySelector(`.slideW[data-filename="Slide${slideNum}"]`);    
        console.log(targetElem); // works

    gsap.to(window, {duration:0.4, scrollTo: targetElem}); //FAILS!!


  9. Currently I have a draggable item that alters the item beneath it when hitTest is true. I use 'throwComplete' because using onDragEnd sometime triggers both the element the item originated on AND the item the draggable ends up on (I'm using snap). I only want the element that the draggable element will end up on, and throwComplete works correctly for this. However, it takes about .5 of a second for the throwComplete to be triggered. I tried 'autoScroll: 2', but that didn't seem to make a difference. Any tips?



  10. Hello, I have a simple object I would like to 'throw' to simulate a scroll on a mobile device. While the object can be dragged, the throw simulation does not appear to be. Are their certain controls I am missing?


    Draggable.create("#square", {
        onDrag:function( ){
    //I am using these libraries:
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.1/TweenLite.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.1/utils/Draggable.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.1/plugins/CSSPlugin.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.1/TweenMax.min.js"></script>


    See the Pen LrWvRQ?editors=1010 by ron-itelman (@ron-itelman) on CodePen

  11. Hello, I would like to achieve something like the attached codepen with the following modifications, and using the TweenLite.min.js and the MorphSVGPlugin.min.js file.


    When the circles comes our of the center parent circle, I would like to morph circles into something else using MorphSVGPlugin, like a square.


    Any tips on how to create this effect?


    See the Pen pvwZJp by lbebber (@lbebber) on CodePen