Jump to content
GreenSock

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

Leaderboard

Popular Content

Showing content with the highest reputation on 10/16/2021 in all areas

  1. Hello @ttiimmaacc GSAP's ScrollTrigger is a super powerful tool to do things like these. It might really help you with this. Here is what your example could look like ( I just pushed the start and end away from the edges of the window for better visualization). https://codepen.io/akapowl/pen/b01fd41c0a80f02caa7803c413c41e37 Since version 3.8.0 ScrollTrigger also comes with a .isInViewport helper function - which for your needs in this case shoudln't really be neccessary though. Before taking a deeper dive into the documentation, I would suggest checking out the getting started article:
    3 points
  2. Thank you @akapowl This is exactly the information I was looking for. In hindsight, I should have spent my time learning what GSAP can do rather than attempting to translate the JQuery line for line. Classic beginner goof.
    2 points
  3. I think, I already did.
    2 points
  4. If sections are overlapping you likely have to adjust padding, set pinspacing to true or change the order of your scrolltriggers. Hope this helps!
    2 points
  5. Like I mentioned above, GSAP has no dependencies, so those warnings are all for the React stuff. You can try to fix them, but it's unlikely you'll be able to get them all as create react app has a ton of dependencies. If you don't mind me asking, why did you choose React? We want to improve GSAP integration with React, so we're looking for feedback on how to improve that.
    2 points
  6. It's really not going to matter one way or the other. I wouldn't put much thought into micro-optimizing for performance unless you notice a problem. I see people waste a lot of time worrying about stuff that will never matter in the real world. They key to animation performance is to be mindful of what properties you are animating. Some properties perform better than others, like x, y, and scale vs left, top, and width/height. And the type of object you are animating matters too. So SVG would be slower than an HTML element, and all of those would be slower than canvas/WebGL.
    2 points
  7. Or are you looking for an event listener? (pseudo code) svg.addEventListener('click', (e) => { timeline.play(0) })
    1 point
  8. I'm on Windows too, but I've never had that problem. When I installed VS Code, I set the option to add it context menu so I can right click on a file to open it. But I rarely do that. I usually just create and edit the file within my project folder... If you still can't get it working, you should probably direct your problem to the VS Code team as they would be more knowledgeable on the subject.
    1 point
  9. I found my issue ! Because of my JS pre-processor, every file inside the /script/ folder is pre-processed, and it generate this issue. I created a folder and I include my file from this folder, and everything is fine ! Thanks for your help, and sorry for the time you lost, it was my bad Have a nice day !
    1 point
  10. Yeah, they are using Canvas for the image effects (which I'd imagine is being controlled by GSAP behind the scenes) the effect likely using something like quicksetter to track and animate mouse locations, and that position to determine how the canvas elements are reacting to that. https://greensock.com/docs/v3/GSAP/gsap.quickSetter()
    1 point
  11. We just showcase sites that use GSAP, but they don't give us their source code, so we don't know how they did that. From what I can tell, they are using canvas, which isn't that straightforward. And they are probably doing something similar to this, but adding parallax on top of it. Image Panning (codepen.io)
    1 point
  12. My pen above pretty much (except for the additional pinning and different start/end) does what's happening to the image of the two women in the example you posted above. Maybe you didn't see the correct one, because I first posted a link to the wrong pen. As @GreenSock already mentioned, please note, that these forums are not intended to provide free "build-to-order" solutions (please read the forum guidelines). First and foremost these forums offer support with GSAP specific questions. If you have trouble getting an effect done as you wish (which is not what these forums are there for in the first place), please provide a minimal demo of what you have tried so far and explain in a bit more detail what you want to happen and you will drastically increase your chances of gettig a solid answer. Thanks.
    1 point
  13. Hi Mark, I'm surprised this didn't crash your app. You're creating a new scale animation on every animation frame. It's generally a bad idea to create an animation inside an onUpdate callback, especially an animation that has a repeat of -1 as that will run an infinite amount of times. tweenRotateCube = gsap.to(addCube.rotation, { y: Math.PI/2 , duration: 3, repeat:-1, ease: "none", onUpdate: function () { gsap.to(addCube.scale, { duration: 0.1, repeat:-1, x: 1.2, y: 1.2, z: 1.2, }); }, }); Checking for an active animation is ok for very basic stuff. With what you have going on, you'll need a better way to keep track of the hover states. I just made a little animator class to handle that. A Pen by GreenSock (codepen.io)
    1 point
  14. I don't think it would make any significant difference, generally animating fewer elements is better. So animating single parent element will be a lot more efficient if you have too many child elements. Also, instead of animating top or left you should animate x and y whenever possible. Animating top, left causes browser to repaint layout which can give poor performance of you have a lot of things animating.
    1 point
×