Jump to content
Search Community

Carl last won the day on June 9

Carl had the most liked content!


  • Posts

  • Joined

  • Last visited

  • Days Won


Carl last won the day on June 9

Carl had the most liked content!

About Carl

Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

  1. Hi and thanks for the demo! in order to add space beneath the pinned element you can set pinSpacing:true this will prevent other page content from scrolling behind the pinned element. https://codepen.io/snorkltv/pen/qBzBGmw?editors=1010 This video from my course ScrollTrigger Express explains it in greater detail and can be found in the docs as well
  2. Hello and welcome to the forums This is by no means a beginner effect or even something that would fall into the general capabilities of GSAP. However, you could start with this code and perhaps make some modifications Click and drag: https://codepen.io/PavelDoGreat/pen/zdWzEL
  3. Hi, It's not really clear to me which part of the animation you have trouble with: the line morph, highlighting the path, moving the highlight segment etc... Regardless, it's a pretty neat effect. With GSAP's available tools it's all possible. Here is a demo with enough code to get you started: https://codepen.io/snorkltv/pen/WNBVmwB?editors=0010 The reference site uses a masked path but I'm not sure how much of that site you intend to copy. I copied the exact stroke d attributes from the site's source code for this demo.
  4. Hi and welcome to the forums, Great to hear you are enjoying your time with GSAP! There could be a few reasons why this is happening and it is very difficult to troubleshoot without a minimal demo. One common mistake is relying on from() tweens which by design will use different ending values depending on when they are created. This video from my free beginner's course GSAP 3 Express explains the issues in detail When dealing with more complex "enter" and "leave" animations you can very easily run into issues with overwriting With "enter" and "leave" animations it is typically best to call functions that create those animations on demand instead of having pre-made timelines that you try to control as the current state of your enter animation is most likely going to be very different than the start state of your leave animation if the user is trying to trigger them repeatedly in quick succession Hopefully some of this helps, but it would be very helpful to see a minimal demo that clearly illustrates the issue with as little code as possible Thanks!
  5. glad you were able to implement my suggestion. try changing the duration of the first tween to a very small number like duration:0.001 https://codepen.io/snorkltv/pen/MWdXPKN?editors=0010 having a set or 0-duration tween as the first thing in a timeline can be kind of funky
  6. Thanks for the demo. If you don't want your animations to have any animation you can set duration:0 or use a set() Once your animations don't have any duration it is important to space them apart in the timeline by using a position parameter. I'm using index * 0.5 in your loop. Without the position parameter they will all run at the same time. https://codepen.io/snorkltv/pen/JjqZvOj?editors=0110 Hopefully this helps
  7. Yes, unfortunately I don't understand your code very well either and the best I can do is provide you an example of how I think it is best to set it up. My demo provides the bare-minimum of code for this type of effect and it's also fully responsive. I think it would be best for you to fork my demo and add your cards in place of my <h2> tags. I apologize, but I just don't have the time at the moment to try to re-work your project for you.
  8. like this https://codepen.io/snorkltv/pen/xxNzwKY?editors=0010
  9. Hi, Perhaps you can just add a blank card that is same width as the viewport.
  10. Hi Glad to hear you are interested in learning more about GSAP and you're trying things like this. Here is a basic demo from my course ScrollTrigger Express that perhaps may help. https://codepen.io/snorkltv/pen/PoxojaO?editors=0010 Open it in a new window and resize to see that it is fully responsive and that the pinning stops whenever "japan" is visible in the viewport. Also notice that each country name (card) is a different width and it adjusts flawlessly to resize. The course contains loads of videos to help you through these types of common scrolltrigger tasks and many more advanced setups. Hopefully this demo will give you some ideas how to incorporate the code into your project. Carl
  11. I might not be following what you mean about the trigger points. But to handle each section fading in its background when it enters the viewport I think this works pretty well just using onEnter and onLeave https://codepen.io/snorkltv/pen/Jjqpmae?editors=0010
  12. it appears that the scale is set relative to the native size of the images not the width and height that you set in pixi. I haven't used pixi in years so I'm just going off what I see. When loading the images the first image is loaded at 300 x 300 but the rest are 150 by 150 and and it seems to work. If you want to stagger different properties at different rates you need a tween for each property. in the demo below I created a timeline. https://codepen.io/snorkltv/pen/qBGVyYR?editors=0010 Hope this helps. if you're not familiar with timelines I'd strongly recommend my free beginner's course available via the link in my signature.
  13. perhaps an "easier" approach would be to push each sprite into an array and then after the loop runs you can tween every image in that array using a stagger https://codepen.io/snorkltv/pen/xxNPjPY?editors=0010
  14. Thanks for the demo. very cool. The reason your images were animating all at once is because you are creating new tweens at virtually the same during each iteration of the loop. what I did was create a timeline outside the loop and then each images tween gets added to the timeline at a position of (imgNum * 1) https://codepen.io/snorkltv/pen/vYwWjev?editors=1010 EDIT: at one point I had the wrong pen here
  • Create New...