Popular Content

Showing content with the highest reputation on 10/27/2017 in all areas

  1. 5 points
    Hi @lichunbin814, Welcome to GreenSock Forums. Please look at these tips: https://greensock.com/svg-tips Special: transformOrigin. Here is only an approximate direction: Happy tweening ... Best regards Mikel
  2. 5 points
    Believe it or not, the trick here is the easing! I did something similar to kind of give a "slot machine" rolling aesthetic to the end of a sentence here What you'd want to focus on is the ease: Elastic.easeInOut.config(8, 0) For your case, "8" might be too much ... so modify that to get the right feel for your project.
  3. 4 points
    Another option would be to actually create the DOM text elements instead of Animate CC dynamic text and control it along with other Animate CC objects, if need be (like if the text is nested in another container), via EaselJS's DOMElement class. In this case, the TextPlugin would work as normal (or should technically :). So basically create text div's in the same div as the canvas element and treat it as another layer in canvas.
  4. 3 points
    Here is demo with delay before parallax effect happens. You can play with movement, timeout and ease effects to see what works best for you.
  5. 2 points
    Thankyou so much @Sahil this really helped me implementing the effect. Thankyou
  6. 2 points
    Hello @venn This happens due to the nature of the two mouse events you are using .. mouseover and mouseout. Both mouseover and mouseout will trigger event bubbling down the DOM to its children. That is why you see it (#container) firing again when you enter its child (.slide) with your mouse. To get around this you can either keep using mouseover and mouseout and use event.stopPropigation(). Or the better way is to just use mouseenter and mouseleave. So instead use mouseenter instead of mouseover. And use mouseleave instead of mouseout. The below example uses mouseenter and mouseleave. And when you look in the console, you can see it only fires once: Happy Tweening!
  7. 2 points
    Hello @9lines and Welcome to the GreenSock Forum! Sorry your having an issue! I'm a little confused in why your using roundProps alone with just className? But to better help you, please create a reduced codepen demo showing what you describe. This way we can test it to see the issue in action and in context. Once we test your code in a live editable environment we can debug in the browser to find out why this is happening Thanks
  8. 2 points
    ...steps out of the shadows... I think it was four years since my last post. I was an as2 and then as3 lib user back in the good ol days of Flash. Great post.
  9. 2 points
    Yes indeed, TextPlugin is for DOM elements but it sounds like you're trying to edit a canvas-based proprietary Adobe object instead. One possible solution would be to create an invisible DOM element (display:none) and tween the text there using TextPlugin and then in an onUpdate, copy the text from there to your Adobe object.
  10. 1 point
    Hello @Varinator! Please create a reduced codepen demo showing what you describe. This way we can test it to see the issue in action and in context. https://greensock.com/forums/topic/9002-read-this-first-how-to-create-a-codepen-demo/ Kind regards Mikel
  11. 1 point
    @OSUblake Here's what I am currently fiddling with: It's a bit messy since I've been tested different approaches but I am able to get it to run based off the audio frequency data. I am unable to demo a working example of it using the web audio api since I don't have any sources for an audio file. Currently figuring out how to apply gravity and particle splitting. Not going ass smooth as I had hope but I'll try and update the pen should I make any progress. Edit: The current example using the audio frequency data on my end has a better fountain effect than the one on the pen. I am not sure if there are any available sources for linking mp3 files without stealing bandwidth of the owners.
  12. 1 point
    Oh, absolutely. If I understand you correctly, you can already do that. Simply define it as the "animation", like: var tl = new TimelineLite(); tl.to(...); ... GSDevTools.create({ animation: tl, globalSync: false }); Is that what you mean? GSDevTools doesn't need to be just wired up to the root/global timeline at all. You can point it at any animation (tween, timeline, whatever). Does that help?
  13. 1 point
    Sorry, I don't know much about Three.js but you seem to have some dangerous recursion in there. At 60 frames per second you are creating a new mesh, pushing that mesh to an array and then looping through the array and creating new tweens on each mesh that is already in the array. Sorry, I don't know much about Three.js but you seem to have some dangerous recursion in there. At 60 frames per second you are creating a new mesh, pushing that mesh to an array and then looping through the array and creating new tweens on each mesh that is already in the array. if you add the console.log as shown below you will see how quickly it gets out of control. function newBlips() { var i; const mesh = new THREE.Mesh(geometry, material); mesh.position.set(rand(-1000, window.innerWidth), rand(-500, window.innerHeight), -1000); scene.add(mesh); blips.push(mesh); for (i=0; i < blips.length; i++) { console.log("no!!!") TweenMax.to(blips[i].material, 3, {opacity: 0, ease:Power2.easeOut}, 0.2); } } Definitely get rid of that loop. You should only need one tween per mesh after it is created. I don't think you want to call newBlips on each render either.
  14. 1 point
    Sure, feel free to post the most reduced test case possible. I'd be happy to take a peek. Disclaimer: I know absolutely nothing about Vue, so if there's any way you could just use vanilla JS, that'll greatly increase the chances of me getting you a decent answer
  15. 1 point
    Yeah - my fault. I should have asked if you were familiar with the setPin() method first. Here's a link to the docs for it: http://scrollmagic.io/docs/ScrollMagic.Scene.html#setPin Happy tweening.
  16. 1 point
    In addition to the advice above, I'll offer one piece that helped me. I started by copying and pasting tweens from the work of other members. That's fine for your first few, but after that, you'll learn more by typing out every character of every tween. It gives you a better feel for the syntax and you're going to make mistakes. You'll invariably miss a comma or semicolon and sometimes forget to close your curly braces. This will cause errors that will need to be fixed in order for everything to work. Those mistakes will teach you a lot more than having everything work perfectly from a copy and paste. Just my two cents worth. Happy tweening.
  17. 1 point
    HI @thatkookooguy If I understand your question correctly, then - yes - setting immediateRender to false should take care of that problem for you. .set('.hero-fight-parallax.fixed', {display: 'block', immediateRender:false}) Hopefully that helps. Happy tweening.
  18. 1 point
    Can you post a demo? I think your implementation can be achieved with very few lines. It will also be better for you to get your own code refactored and see how something can be achieved. Follow this thread and create a simple demo with limited code that demonstrates your problem.
  19. 1 point
    Following is demo I created today for parallax effect which triggers after mousemove event ends with slight delay of 200 milliseconds. You can apply similar logic along with ScrollMagic to get desired effect. Right now checking on mobile, you can see that once event ends there is slight odd movement by elements that indicates that easing effect is added when scroll ends.
  20. 1 point
    Just came across this example:
  21. 1 point
    Hi, Isn't that plugin for HTML DOM only?
  22. 1 point
    Yep. That's to be expected. ScrollMagic doesn't know about the animation, and is getting the scroll position like it normally does, but that's not correct. The value ScrollMagic is using is the end value, not the current value, so it's out of sync. I have some other things I need to do, but I will make a demo later on showing you how to get the smooth parallax working with that code.
  23. 1 point
    You've got it. Preview (uncompressed) here: https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/Draggable-latest-beta.js You can define autoScrollMarginTop, autoScrollMarginBottom, autoScrollMarginLeft, and/or autoScrollMarginRight. Is that what you're looking for?
  24. 1 point
  25. 1 point
    I've found the answer! As it turns out a plugin (LayerSlider WP) I believe also uses Greensock, so WordPress was loading it twice. I deactivated LayerSlider and no more errors!!! Hopefully this will help anyone else using GSAP with WordPress. By the way, thanks for the great support.
  • Newsletter

    Want to keep up to date with all our latest news and information?

    Sign Up