Jump to content

Carl last won the day on September 11

Carl had the most liked content!


  • Posts

  • Joined

  • Last visited

  • Days Won


Everything posted by Carl

  1. Yes, building a sequence as @alig01 suggested is what I would also recommend to anyone starting out. As you get more comfortable with GSAP you may want to look into CustomEase https://codepen.io/snorkltv/pen/QWzyZXp I added scale as a property too as the change to opacity:0.7 is fairly subtle Click here to see the ease graph Also if you want a single-tween solution you could explore CSS Keyframes in GSAP
  2. I would create a single animation that has an onUpdate function that is used to update the slider value and the displayed number https://codepen.io/snorkltv/pen/qBLOwZR?editors=0011
  3. Carl

    Pin problem

    The white space is caused by the pin-spacer. this creates the necessary scroll distance for the user to continue scrolling while the elements are pinned. Please see the docs for my pinSpacing video https://greensock.com/docs/v3/Plugins/ScrollTrigger (which is also in ScrollTrigger Express) Yes, and it is fixed in place in the demo above as that is the one that is being pinned. Do you see it moving? When dealing with pinning, I've found for the best visual result you can just give the pinned element a height of 100vh. This way you don't see what's happening above or below as the page is scrolling: https://codepen.io/snorkltv/pen/RwEWjMV Another option is to put the section that comes after the pinned element inside the pinned element. So in your case take the last section and put it in the pinned section. Another option is to explore giving surrounding elements or the body the same background color so you don't notice a gap. you can also style the pin-spacer with .pin-spacer { background:green; } Also, ScrollTrigger Express has a "Pinning Deep Dive" lesson (members only) that shows more about pinning too.
  4. Carl

    Pin problem

    This was a little tricky due to how you were applying your css. when you pin elements they get wrapped in a pinSpacer div. this messes up your nth-of-type selectors. so once the second section got pinned, it no longer had height auto. now the 3rd section is the 2nd that gets selected with section:nth-of-type(2) { background: #8c75fe; height: auto; } I added inline styles to each section so you can now see what's happening. the second section has the class of .pinMe and is working as expected. https://codepen.io/snorkltv/pen/qBLOPdy?editors=1100
  5. Carl

    Pin problem

    Thanks for the clear demo. the image is in content. I gave content a red background. content appears to be pinned correctly. I extended the end value so there is more time to scroll https://codepen.io/snorkltv/pen/vYvNJRa perhaps you meant to pin the purple section? or maybe I'm misunderstanding the issue.
  6. @Rodrigo that looks like the original code. oddly enough it's off a bit on desktop safari but fine on iOS 🤷‍♂️
  7. Upon further review it now seems that my demo above does not work as expected on iOS Safari. Please await the experts.
  8. Thanks for the clear demo. It appears that using transformOrigin:"50% 50%" works fine in FireFox https://codepen.io/snorkltv/pen/oNJjXKg Being that things in the defs aren't actually rendered in the SVG I'm not so sure it's appropriate to apply svgOrigin to them. I suspect someone from team @GreenSock will be able to provide a more thorough investigation and answer when time allows.
  9. As I understand your question you could use 2 ScrollTriggers. We refer to this technique as an “offscreen reset” I go over this a few times in my ScrollTrigger course, but here is a simplified demo https://codepen.io/snorkltv/pen/abQdKLN I use the grey area to show what happens off screen but you can change those values to match the top and bottom of the viewport here’s a more advanced example where the headers all roll towards you as they enter the viewport from top and bottom using the same basic technique. They all reset to the light grey side when they leave the screen too. https://codepen.io/snorkltv/pen/YzvjGom hope this helps
  10. I really didn't plan on going down this path, but my curiosity got the best of me. Although, this is mostly functioning and you can pin the Swiper section AND navigate it with the scrollwheel and via swiping, I really don't think it's ready for use in the real world. My thoughts are listed in the demo. The short version is: Locking the scrollbar is asking for trouble. Best viewed in a new window: https://codepen.io/snorkltv/pen/QWzwmjJ
  11. Glad that helped and thanks so much for the kind words. If you want to switch plans just send me an email and i'll provide some instructions.
  12. Hi Kwabena, Glad to hear you are enrolled in my courses. Studying these demos is a great way to increase your learning! I'm guessing in this case that the developer just chose 3500 as a number that is "big enough" to work well in most cases. I just made a fork that uses a "function-based value" which figures out the scrollDistance based on the width of the window * number of sections. https://codepen.io/snorkltv/pen/LYMEdZb?editors=0011 This will allow the vertical scroll distance to be the same amount that things are moving horizontally. An added bonus of function-based values when used with ScrollTrigger is that they automatically get re-calculated on window resize. Be sure to open the demo in a new window and watch the console for updates after you resize. hope this helps Carl
  13. that could be fairly complex. if you want to listen to scroll events but not actually scroll the page you probably want to look at Observer. This demo from the GreenSock team shows how to vertically scroll to a pinned a section and use the scrollwheel to trigger animations. when the animations are done then vertical scrolling resumes. https://codepen.io/GreenSock/pen/MWGVJYL?editors=0010 You might be able to plop in your swiper gallery to the pinned section and call swiper.slideNext() stuff where they use the gotoPanel() function on lines 81 and 89.
  14. Carl

    Is this possible?

    Yes, that is exactly the type of animation that GSAP excels at. My suggestion would be a timeline with 2 tweens that run at the same time. first tween: move along the x axis second tween: animate the skewX to 2 and have it repeat and yoyo. To account for the repeat the duration should be half the value of the first tween.
  15. happy to help. Although I find the way you are doing it with MotionPathPlugin is the better way, I couldn't help but try to throw 2 circles in using my more verbose and less flexible timelines. https://codepen.io/snorkltv/pen/LYXwwzw?editors=0010
  16. Good job on implementing the suggestions! Instead of trying to figure out a unique position for where second circle-after should start, I prefer to give it the SAME animation as circle-before but just start it at a later time. This can be achieved with a single tween and a stagger https://codepen.io/snorkltv/pen/BaGXgej?editors=0010 Things to note: I set a repeat:5000 inside the stagger object which makes each circle repeat as soon as it finishes one iteration. This is different than having a repeat on the tween or the parent timeline I also set the timeline to jump ahead using tl.play(2) so that both objects are animating immediately. I also initially hide main-container using opacity:0 in the css so that you don't see the circles before they are "attached" to the path. after the main functions runs I show everything using: gsap.set(".main-container", {opacity:1}) Hope this helps and good luck on the rest of the project.
  17. ok, this turned into an afternoon of distraction After doing it first with MotionPath, I had a hunch it could be done with some math and experimentation so I came up with this https://codepen.io/snorkltv/pen/jOQgKWX?editors=0110 The circular motion is caused by offsetting the transformOrigin. It's pretty good. However you will always have to play with the duration of the animations of the arcs vs the straight part as it can look bad if there is an abrupt change in speed. Ultimately (as @mvaneijgen suggested) MotionPathPlugin is way cleaner as it: will only require one tween speed is automatically kept consistent throughout I think most people think of MotionPathPlugin as only good for SVG animations, however it excels at applying SVG path data to HTML objects! In order to figure out the path for an html element I created a similar svg rect with rounded corners converted that rect to a path with MotionPathPlugin used that path to animate a div circle around my div button https://codepen.io/snorkltv/pen/BaGXxrd This demo here copies the path value from the pen above and applies it to the div button. I did this to show that you don't really need an svg in your final html page https://codepen.io/snorkltv/pen/jOQgKNe?editors=1010 If you have buttons of different sizes you could use these files as guides to create a script to dynamically generate all the assets. If you are handy with SVG path data you could also use the dimensions and radius of your button to dynamically create your own paths. Somehow I feel there's some room for some future creativeCodingClub.com lessons here.
  18. wow, @mvaneijgen came in hot 🔥 with a super solution! I was working slower on something very similar so I'll just share it also https://codepen.io/snorkltv/pen/gOQyxMv?editors=0110 Also, there are times when you want to open one thing and close whatever other this currently open. I have video lesson on this in my GSAP video training, but here's the demo if you want to study the technique. https://codepen.io/snorkltv/pen/YzGpXWO
  19. I'm 100% with @Rodrigo and @mvaneijgen in that it is MUCH better if you provide a demo even if it's broken. We have no idea if the box that moves left to right also moving vertically as the page scrolls. If not, what holds it in place? Is it pinned? Also we don't know what is triggering the animations (a big part of ScrollTrigger). There are just way too many factors for us to guess at which may or may not be involved with what you are seeing. However, I found this interesting in that I suspected that having multiple ScrollTriggers animate the same object may introduce some un-expected behavior so I put together a little test. https://codepen.io/snorkltv/pen/eYQQLrV the yellow section triggers the first movement of the red box. the blue section triggers the second movement. In my setup it proved useful to use a fromTo() on the second ScrollTrigger. The trouble you most likely encountered is that the second ScrollTrigger is using the existing starting x value of the box when the page loads. it doesn't know the first ScrollTrigger is going to move it. Hopefully this gets you closer to what you are going for.
  20. Hi, Thanks for providing a demo. There are few conflicts and areas of confusion. I'm guessing you are at the stage where you just try a bunch of stuff and none of it quite worked as planned. That's ok, but it makes it kind of hard to figure out the intention. I tried making it work, but unfortunately I can't see any of the SVG artwork. on rare occasion a pink bar shows up and then disappears. Even after removing the JS It's just a white page. A few things I noticed Inside your loop you are creating a single gsap.to() for a single letter. In this tween you are adding a stagger property but there is nothing to stagger if you're only animating one thing. Your to() tween isn't tweening any properties so there is no animation to control with your toggle actions of "play pause none none". All of the ScrollTriggers use the same trigger ".one" so that means all the classes would get applied at the same time and not stagger. If you want to use toggleClass it would be better to just create a ScrollTrigger that is not attached to a to() tween Suggestions moving forward make a fork of the demo you provided. make sure all the SVG letters are fully visible. animate them with a simple gsap stagger. post the updated demo below with a clear description of where you are stuck or what needs to be added. Once we see the artwork and the animation we can then better advise how to implement ScrollTrigger and get the effect you want. Although it's ok to animate things by adding css classes, at this stage of the game I think it's only adding more confusion and potential for conflicts.
  21. Thanks for the prompt and clear reply. Very helpful. That also takes care of one of the other oddities I experienced where onChange would only fire when I clicked. i'm not so sure an API change is necessary. I read the docs kind of hastily and was just throwing callbacks in until something worked.
  22. Hi Team, I'm trying to see if it is practical to tap into some of Observer's features for that mouse follower effect i saw on your twitter feed 😁 It seems there may be some sort of distance tolerance or velocity threshold which determines how often elements are placed. I'm starting with the absolute basics of trying to only fire something after 50px of movement Below I am only updating the x/y of the circle if the mouse moves 50px. https://codepen.io/snorkltv/pen/PoxdybR?editors=0110 Move mouse slowly to see position updates only when mouse reaches the square border. Right now it meets my minimal requirement, however I only got this to work by having both an empty onMove callback and an onChange callback in place. if you comment out the onMove (line 7) it no longer works. The question is, why do I need the empty onMove? Thanks for your help! Carl
  23. Great job, @mvaneijgen Very nice application of the "functions that return animations" concept!
  24. Thought I would share a recent tutorial that I created for my Creative Coding Club students this week. The Demo https://codepen.io/snorkltv/pen/xxQpRYv??editors=0010 Watch the Full Lesson Video Details Today we are going to deconstruct a cool effect i saw on this Vega WebFlow Template. We'll dig behind the scenes to get a sense of how it's built and then build it up from a very basic starter file. Along the way you'll see that some of my initial presumptions about how to build it were incorrect. I decided to show you all my steps because I want you to see that in order to figure these things out, we all have to start somewhere and learn along the way. Be sure to watch the whole video and see if you can guess where I went wrong OR maybe you can try your own solution. Want more lessons like this? Great! I have over 200 lessons for you waiting in my GreenSock Course Bundle to help you learn: GSAP Basics (Free) Advanced Sequencing and Pro Tips ScrollTrigger SVG Animation and so much more The best news: my students get a new lesson every week like the one above so that there is always something new to learn! In just a few short years Creative Coding Club has become the world's largest source of premium GSAP training. I use the knowledge I've gained from reading and answering thousands of posts around here to help you avoid the pitfalls most animators face. You can learn everything I know about GSAP for less than $3 a month. There are super-affordable Lifetime memberships available too. Visit creativeCodingClub.com to start your journey towards mastering GSAP and discovering the joy of animating with code. See you in the club! Carl Not ready to join? Get a bunch of free GSAP tips when you Follow on Twitter and Subscribe on YouTube Bonus Demo Here is one of my favorites using a "double-mask" trick with SVG and one line of GSAP
  25. I was so impressed by this technique I created a simplified demo to illustrate how just one letter's animation works. I thought for sure each character would have been duplicated multiple times. https://codepen.io/snorkltv/pen/dyQXqJr?editors=0010 Great job @PointC!