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 09/06/2020 in all areas

  1. Hey @Eddy1015, welcome to the forum. You'll notice, that your header-background ( that has a position of fixed set to it ) will move up on scrolling after the pinning is finished - that exact thing would happen to your logo if you only just set its position to fixed (plus you'd have to put more styling on it to keep it's position to where you wanted). I think this is, because both those elements are within the header, which is being pinned, and on pin, the header's position is set to fixed by GSAP. On release the position fixed will be removed, thus everything in
    2 points
  2. As yourself and others have mentioned you can use libraries like Three.js, Pixi.js, Babylon.js, TWGL.js, Curtains.js, etc., etc. I suggest that you pick one, learn it and run with it. Let them do the heavy logic unless you are prepared to take a generalized deep dive and potentially reinvent the wheel. Either way there is gonna be a learning experience ahead of you. But in doing so it will open your possibilities for development and creativeness going forward. So don't get discouraged and press onward. The following tutorial might help you learn some things for the effect using Thr
    2 points
  3. Hello and welcome to the club. Try reversing your timeline so that it plays backwards or even use the yoyo option. It depends on the context but you might also use scrub if your animation is using scroll trigger. perhaps you could post a codepen example of your animation so that we can see what you are doing.
    1 point
  4. Yes, if you checkout the timeline() docs The third parameter is time and you can set it in A very Flexible way. there is an article in the learning Centre with lots of information and examples.
    1 point
  5. Also see clear props in the css plugin docs: https://greensock.com/docs/v3/GSAP/CorePlugins/CSSPlugin
    1 point
  6. Would this example help towards your requirements? https://codepen.io/GreenSock/pen/wvBQyqw Also see the following. - https://greensock.com/docs/v3/GSAP/gsap.getProperty() - https://greensock.com/docs/v3/GSAP/gsap.set() - https://greensock.com/docs/v3/GSAP/gsap.quickSetter() - https://greensock.com/docs/v3/HelperFunctions#kill-child-tweens - https://greensock.com/mistakes/#transforms EDIT: Welcome to the GSAP forums @samus. Sorry I missed seeing that this was your first post. 😉
    1 point
  7. Hey Holo_Back. Video formats are not designed to be played in reverse. The following is probably about as good as you're going to get and it's pretty choppy to me in reverse: https://codepen.io/GreenSock/pen/OJNzNRb Note that this is not a limitation in GSAP - GSAP is doing it's job. It's a limitation of the video formatting and how browsers render video.
    1 point
  8. @robertox85 Maybe SVG-Filters ( displacement / turbulance ) could be a way to go for you: https://codepen.io/danbrady/pen/gqjqWr https://codepen.io/Flothus/pen/ExjXvNG Also check this basic tutorial on youtube also using GSAP (although only v2.0.2) to animate the turbulance on images
    1 point
  9. @ZachSaucier just posted seconds before me there. Wanted to say the same; you could use two ScrollTriggers there with different startpoints and adjusted endpoints. Made the box a bit bigger and set the data-speed in the html to 0.9, just to make a bit clearer, that this works. https://codepen.io/akapowl/pen/xxVgvdE Cheers Paul Edit: Better rely on the way, the ScrollTriggers are set up in @ZachSaucier's example above - I was a bit in a hurry there.
    1 point
  10. You start position is incorrect because it will wait for the pinned section to finish being scrolled.
    1 point
  11. I converted Blake's pen to GSAP 3: https://codepen.io/GreenSock/pen/PoNZxqX?editors=0010
    1 point
  12. I see. In general there are many ways of doing this, but for now i'll stick to the logic of the Codepen you included. Here is a simplified fork, with only the bare minimum: https://codepen.io/neundex/pen/BajGvxv?editors=0110
    1 point
  13. Hi everyone. I started working with ScrollTrigger and I have a problem with changing the content based on my location. I tried to do it like on codepen, but it does not work as it wants. In the example, the last photo of the kitty sometimes appears and sometimes not. I want to make a similar effect as on https://skookum.com/
    1 point
  14. Thanks for the clear demo. In general it's best to avoid affecting the same elements in different tweens/timelines that can conflict. Here's the sort of setup that I'd use instead: https://codepen.io/GreenSock/pen/PoZjBzR?editors=0010 Some side notes: If you find yourself using the same .querySelectorAll in a loop and getting individual elements from it, save it to a variable beforehand so you don't have to repeat the lookup work. We recommend using the GSAP 3 format for durations and easing. You don't need to pass numerical values as strings most of the t
    1 point
  15. Here's the math to cover an entire area with a circle... https://greensock.com/forums/topic/18880-page-transition-with-barbajs/?tab=comments#comment-87730 https://codepen.io/osublake/pen/PdZQrL
    1 point
  16. It works the same way as a clip-path or mask. Move your mouse over the text. https://codepen.io/osublake/pen/946d5ebb14c5f5790369ce9ef0c84b39
    1 point
  17. Its very difficult to give general advice on complex UI animations like that without having some understanding of your level of experience and what you have tried. This is why CodePen is so helpful, it gives us a clear starting point in directing you . Directions on using GSAP with CodePen can be found here: I would definitely suggest that you try just getting something follow the mouse on hover first. This demo from @Sahil illustrates a very popular effect that has some similarities to what you want to do. Perhaps it can help you get started.
    1 point
  18. Maybe this demo can help. It's an answer to another forum question, but it shows a simple master timeline. It also shows how to use the position parameter when you add the nested timelines to the master. Happy tweening.
    1 point
  19. Hi @Tootall, Welcome to the GreenSock Forum. This could be a way ... The green div just marks the area. Happy tweening ... Mikel
    1 point
  20. After responding to your PM that I won't be able to do it because it will be time consuming I still gave it a try because it bothers me to give up in the middle. In following demo I have just re-implemented the mouse movement and implemented the cursor and target parallax. You should be able to reuse it for multiple elements though i haven't tested it myself, I have just copied your button element to check if it works on multiple elements. Though I don't know what you meant by " the circle scale up and align with the arrow ", if you meant something like morphing around the the targ
    1 point
  21. Yeah, I saw that library a couple months ago. Rich Harris makes some pretty cool stuff! I actually proposed a similar plugin a couple of years ago... https://greensock.com/forums/topic/11374-override-properties-when-tweening-classname/?p=46364 Here's the demo I made to show off how it would work. At the time I didn't think about a motion path, but that would definitely be pretty nice if there was a plugin that could do it all. .
    1 point
×