Popular Content

Showing content with the highest reputation on 12/18/2017 in all areas

  1. 3 points
    Hi Rick May pls check this out :
  2. 2 points
    Check out this demo from @OSUblake I think it will be a great foundation for this effect
  3. 1 point
    Hi rgfx Your section's width is bigger than its child and content doesn't overflow, try to remove section's width in your CSS or set to smaller value
  4. 1 point
    Hi and welcome to the GreenSock forums, This post looks very similar to your other thread here: in which Sahil provided a few examples (which are pretty much the same that I would provide) Its best to keep one thread going per topic. These forums don't really aim to provide a free service where people build out projects upon request. We really focus on the basics of the GSAP API so that people can achieve their animation needs. It can take a lot of time trying to convey all the logic involved in something like a slot machine with multiple spinning elements which need to stop at random increments and stuff like that. As mentioned in previous post, the ModifiersPlugin https://greensock.com/modifiersPlugin will help you achieve an "infinite carousel" effect where elements will have their position reset after they move a certain distance. If your scrolling numbers can be simple bitmap images (not DOM elements) a much easier approach is just to tap into the power of repeating background images
  5. 1 point
    It was mostly due to CSS, this should solve the issue.
  6. 1 point
  7. 1 point
    What you were doing with progress was creative, but the very tiny issue with that is your elements disappear once animation completes. For that you can wrap elements by using Modifiers plugin. You can read about wrapping function here https://greensock.com/forums/topic/15737-modifiersplugin-helper-functions/ and check docs for ModifiersPlugin, it basically lets you modify values before actually applying them. I know this might seem more complex to you than what you had done but if you care about those tiny details you can take this approach. Another thing is, you were using really old version of TweenMax, cdnjs has dropped support for 'latest' links so it is actually old version. Finally, I am not sure if your approach of explicitly calculating boxsize by multiplying with 2 is correct but I have very little experience with SVGs so you know better or someone else might point out. As for timeline, timeline is sequential so it will run each tween after another so you can't really use it in this scenario. You can add all tweens in timeline with position parameter 0 which will make them start at same time but you won't be able to take advantage of your progress approach. I often see people use timelines and add tweens to it on hover effect, and they start wondering why animation doesn't stop. That happens because timeline is going to play every single tween added to it. Also timeline just acts as container, so if you create 10 tweens and add it to timeline, you are still creating same amount of tweens. Just timeline makes it easier for you to manage your animation. Hope that clears your doubts, though feel free to ask if you have any questions.
  8. 1 point
    Thanks @GreenSock. Yeah I think the native scroll lock only on drag was what I had in mind but I had a feeling that might not be feasible. My client was taking issue with the fact that if you give it a swipe left/right, the page also moves vertically if you happen to move your finger upwards or downwards a tiny bit. Not a big deal to me, but worth investigating. Thanks!
  9. 1 point
    Hello dear friends, No doubt Christmas is coming ... Hi @Jonathan - sorry, when I saw your new portrait, I just felt the need to redecorate my tree to dedicate it to the GreenSock community. I coded my first Christmas tree inspired by the work of Petr Tichy (here) Dec 2015. It was one of my first exercises. Kind regards Mikel
  10. 1 point
    Hi @shaunhurley The callback system for Draggable works just like the one TweenLite/Max and TimelineLite/Max. If figuring out how to set the scope isn't obvious, then it's probably due to how your code is written. My guess is that you're doing something like this, which is what all the examples in the docs do. There is a way to set the callback scope to the target when you create draggables like that, but I'm not going to get into that because it requires more work. Draggable.create(".elements", { ... }); To set the callback scope to the target, you should be working at the element level, creating one draggable at a time. This may require you to use some sort of loop if you want to create more than one. var draggable = new Draggable(theElement, { throwProps: true, onThrowComplete: update onThrowCompleteScope: theElement }); And knowing how to bind a function can simplify how you define callbacks in GSAP, or any library for the matter. Consider the following. You want to use a scoped callback for different actions, and want to pass in a couple of parameters to that callback. Pretty messy, right? var animation = TweenLite.to(theElement, 1, { onUpdate: update, onUpdateParams: [100, 500], onUpdateScope: theElement, ... }); var draggable = new Draggable(theElement, { throwProps: true, onDrag: update, onDragParams: [100, 500], onDragScope: theElement, onThrowUpdate: update, onThrowUpdateParams: [100, 500], onThrowUpdateScope: theElement }); function update(min, max) { console.log("this", this); // => theElement console.log("min", min); // => 100 console.log("max", max); // => 500 } Instead of specifying each scope separately, you can use "callbackScope", but it's still kind of messy. We were only able to get rid of 1 line of code. var animation = TweenLite.to(theElement, 1, { onUpdate: update, onUpdateParams: [100, 500], callbackScope: theElement, ... }); var draggable = new Draggable(theElement, { throwProps: true, onDrag: update, onDragParams: [100, 500], onThrowUpdate: update, onThrowUpdateParams: [100, 500], callbackScope: theElement }); This is where creating a bound function might be useful. You can combine everything into a single, reusable function. The first parameter is the scope. Any additional parameters will be passed into the callback. var boundUpdate = update.bind(theElement, 100, 500); var animation = TweenLite.to(theElement, 1, { onUpdate: boundUpdate, ... }); var draggable = new Draggable(theElement, { throwProps: true, onDrag: boundUpdate, onThrowUpdate: boundUpdate }); Much, MUCH cleaner!
  11. 1 point
    I agree with Sahil in that a rudimentary foundation of JavaScript will really help you learn GSAP. As for the current issue, typically people use "tl" to reference a timeline. In your demo you have a single TweenMax tween that isn't assigned to a variable so there is not way to reference that tween and tell it what to do. The following code should fix your problem var tl = TweenMax.from("#box1", 4, {opacity: 1, rotation:360, ease: Power0.easeNone}); tl.pause(); $('#bPlay').on('click',function(){ tl.play(); }) Also, since you are using one of Petr Tichy's premium courses (which are great) I'd suggest reaching out to him if there is any confusion. He is a super smart guy and very friendly. I know he treats his customers well.
  12. 1 point
    Hi DD77 I've seen literally a dozen or more posts about this pen you forked from GrayGhost Visuals which is a just a basic tutorial on using ScrollMagic. Sahil has gone above and beyond the call of duty in trying to explain how to get certain things accomplished with GSAP. It is not the purpose of these forums to spend hours helping with each new requirement a user has on a project, especially those requiring complex logic and re-wiring of animations that have already been fed into ScrollMagic. I've read this thread a few times and I personally do not know enough about ScrollMagic to solve your issue. The reality is there are a lot of users who need our help (which we offer for free) and we have to do our best to help people with issues related directly to the GSAP API, anything beyond that is a bonus. I hope you continue to enjoy using GSAP and wish you good luck with your project.
  13. 1 point
    Your monitor is a bitmap display, so everything is converted to a bitmap at some point. SVG are resolution independent because the browser automatically redraws the SVG as a bitmap every time its size changes. We can do the same thing with canvas, but the redrawing doesn't happen automatically, which can help with performance. So you'll still be able resize it, but it's not something that needs to be done 60 times/second.
  14. 1 point
    Hi @kaliel Since you're not animating anything that would require an element to be redrawn, converting this over to PixiJS would be pretty easy. You're SVG could be used like a sprite sheet, which is good. 1 graphic is much better than 400+ graphics. I can show how to do that later, but you'll be able to animate 10,000 objects without skipping a beat. Press down to add more bees. That's running without using a particle container, which would make it even faster.
  15. 1 point
    It was jumping because you weren't using e.preventDefault() and you can just scroll using scrollTo plugin. Reverting tween won't scroll your animation. As Jonathan said, I don't want to break any forum rules. Generally we don't provide such solutions and other forum members prefer to get questions with limited demo and specific problem. I don't want to go against the usual rules though I think I have helped you enough. All the best.
  16. 1 point
    Hello @kaliel and Welcome to the GreenSock Forum! Keep in mind that when using SVG that it can only animate using 2D transforms natively. When SVG 2.0 comes out then SVG will be able to animate using 3D transforms and use hardware acceleration. You could always wrap each SVG element in a <div> tag and then take advantage of 3D transforms. But even at a certain point 3D transforms on hundreds of DOM elements will cause that jank (lost frames) your seeing now with SVG elements. So until then you would have to use Canvas / WebGL to get smooth animation with hundreds or thousands of elements. Happy Tweening!
  17. 1 point
    Hello @DD77 Keep in mind that even though ScrollMagic uses GSAP as its animation platform. Scrollmagic is not made by GreenSock. So any ScrollMagic specific questions should be directed to the ScrollMagic Issues Git page. So just keep that in mind that the GSAP forum has to stay focused on the GSAP API. Happy Tweening
  18. 1 point
    Yup it is due to number of elements, switching to canvas will greatly improve performance. Check following thread, Instead of looping you can use function that will return random values, but still what you are doing is too much for Firefox. I had to force close it multiple times and in the end edited using Chrome. https://codepen.io/anon/pen/RxPmNg?editors=0010
  19. 1 point
    I don't blame you for being a bit confused by the behavior. Let me explain... There are actually two ways in which a callback can be triggered - when the playhead enters or when it exits a position on the timeline. Obviously it shouldn't do both (duplicate calls). This is critical for zero-duration tweens and callbacks like this. If you suppressEvents when seeking to a new spot, it indeed suppresses the events while moving there, but if it lands EXACTLY on top of a zero-duration tween or callback, that will (and should) be called when the playhead exits that position. This is actually a very important and purposeful we implemented based on a lot of feedback in the past. So in your demo, the seek() gets called and suppresses events (thus it doesn't call the function that pauses things). It immediately calls play() at that point (the moment the seek() is done executing, thus it's still on the same "tick"). Then, on the very next tick, the playhead leaves that position and it says "oh, there's a callback that wasn't triggered when the playhead arrived there, so we'll fire it now as it exits". Does that clear things up? If you toggle suppressEvents back to false, then the order of things gets switched around - the pause function gets called INSIDE that seek() call...then play() is called, thus it continues playing after that.
  20. 1 point
    Hello @AbhishekSock and welcome to the GreenSock Forum! When using GSAP for responsive animations its best to use the special properties xPercent and yPercent. Find out more here: https://greensock.com/gsap-1-13-1 And here in the CSSPlugin Docs: https://greensock.com/docs/Plugins/CSSPlugin Notes about transforms To do percentage-based translation use xPercent and yPercent (added in version 1.13.0) instead of x or y which are typically px-based. Why does GSAP have special properties just for percentage-based translation? Because it allows you to COMBINE them to accomplish useful tasks, like perhaps you want to build your own "world" where everything has its origin in the very center of the world and then you move things in a px-based fashion from there - you could set xPercent and yPercent to -50 and position:"absolute" so that everything starts with their centers in the same spot, and then use x and y to move them from there. If you set x or y to a percent-based value like 50%", GSAP will recognize that and funnel that value to xPercent or yPercent appropriately as a convenience. Our 1.13.1 Release Notes have some great demos showing how xPercent and yPercent can help with responsive layouts. You want to stay away from animating CSS properties like top, right, bottom, and left. Since those CSS position offset properties will not animate smooth and cause layout to be calculated on every render tick. Happy Tweening
  • Newsletter

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

    Sign Up