Jump to content

mvaneijgen last won the day on August 18

mvaneijgen had the most liked content!


  • Posts

  • Joined

  • Last visited

  • Days Won


Everything posted by mvaneijgen

  1. Your T-shirt was somewhere far outside the canvas of the SVG viewBox and really large (and it was also upside down). I've opened it up in some vector editing software and moved it to the middle of the viewBox and scaled it down a bit. I've also move the circle to the middle, so that it looks like the T-shirt is created form the circle Working with SVGs on the web requires a bit more setup to make sure all the elements are ready for animating. If you are looking for some really simple tool to edit SVG files look at Boxy SVG. https://boxy-svg.com/app Our @Carl has some great tutorials about it, see https://www.youtube.com/user/snorklTV/videos https://codepen.io/mvaneijgen/pen/MWGOJLv
  2. Immediately sets properties of the target(s) accordingly - essentially a zero-duration to() tween with a more intuitive name. See the docs for more info ScrollTrigger is a plugin for GSAP that animates timelines based on the scroll position. If you add a timeline to a ScrollTrigger, in theory the duration does nothing anymore, except determines the timing on scroll. If you have a ScrollTrigger that is a 1000px long and have 10 tweens of each a second, each animation will play over 100px. Play with the position parameter or add an empty tween to your timeline between the tweens that needs a delay tl.add(() => {}, "+=1") this does nothing for 1 second or it's scroll distance equivalent
  3. You'll need to calculate that, you can use the property .offsetTop on the element. Important if you do this you want to also set the transformOrigin, so that it is aligned to the top edge of the box. Check the comments in the code for more details. Any particular reason you've used a keyframe? It's just one tween, so I've set it up as a normal tween, but the keyframe code it also still there if you really need it. https://codepen.io/mvaneijgen/pen/eYregZB
  4. Hi @EdwinSana welcome to the forum! Have you seen the onEnter property of scroll trigger? (see the docs) Function - A callback for when the scroll position moves forward past the "start" (typically when the trigger is scrolled into view). It receives one parameter - the ScrollTrigger instance itself which has properties/methods like progress, direction, isActive, and getVelocity(). Example: onEnter: ({progress, direction, isActive}) => console.log(progress, direction, isActive) I've add a onEnter gsap tween that animates when the ScrollTrigger starts I think you ment scrub: true? I've add an empty tween to the beging of the scrub timeline that does nothing for 2 seconds. There aren't really seconds in a scrubbed ScrollTrigger it will convert your total timeline duration to the total scroll distance. Your scroll distance is 260px and your total timeline duration is 2.5 seconds, so it will do nothing for about 200px and then animate the rest for the remaining 60px. Right now if you scroll back the box will stay at it's opacity:1, but you could fix that with an onLeaveBack tween, but I'll leave that one for you. https://codepen.io/mvaneijgen/pen/BaxmpBb?editors=0010
  5. If you remove the statement you'll get an error "GSAP target undefined not found" and depending on your setup this will or will not run your code, so it may be necessary and it is always better to write code that doesn't have errors in it.
  6. I've disabled one of your ScrollTriggers and the jump seems to have been gone. With this particular ScrollTrigger you're animating the same element that is also the trigger, you almost never wan to do that, because this will endup causing problems when you are not careful. You're also animating the maxWidth with this element, I think you want it to grow to the left and right, right? You can beter use scaleX for that, that is way more performant. I my self like to always start with a timeline in GSAP, this way if I want a second animation to the same ScrollTrigger I can easily do that, but if you start with just a gsap.to() tween you can't. I've restructured your first ScrollTrigger to be a time line and thus if you want to add something else at the same time (like the scaleX of something) you can now do that and use the position parameter to have these start at the same time. https://codepen.io/mvaneijgen/pen/vYjexQg?editors=0010
  7. Hi @kovle welcome to the forum! You don't. Or you have to do some really complicated animation, to make it so that when you move the parent div you animate the child div to the opposite direction. This has nothing to do with GSAP, but is just how the web works. If you translate the same setup with CSS, your child div will also move.
  8. Your path is not a line it are two lines really close to each other! What you want is just a single line. Working with SVG on the web requires some elbow grease to get the files really clean. What I also see is that path points have a lot of decimal points 4248.45703125, this isn't the worst thing in the world, but the detail isn't necessary. I've loaded your SVG in an online tool, so that you can better see it your self. If you zoom in you see there is a double line and that is what is messing up the animation
  9. Can you show what you've already tried? That way we can help you better understand the tools. The pen you're linking to now is from a moderator here on the forum. I would suggest removing the first element from the loop and animating that one manually at the beginning of the timeline. If you just want someone to create the animation for you, you could hop over to the Jobs & Freelance forum and post a topic there.
  10. Hi @mianto06 welcome to the forum! What have you tried already? I see the JS panel is completely empty, I love to see what you've already tried, so that we can help you beter understand the tools. There are some great topics around here already covering infinitely looping animations, see below. If you are looking for someone to create the effect for you, you can also post in the Jobs & Freelance forum
  11. I don't have access to an Android device at the moment my self, but here are somethings you could try Draggable also has a onClick handler, any reason you are not using that? There also is a minimumMovement threshold, maybe increase that for mobile devices Sense clicks when the element moves less than 3 pixels - A common challenge is figuring out when a user is trying to click or tap an object rather than drag it, so if the mouse/touch moves less than 3 pixels from its starting position, it will be interpreted as a click and the onClick callback will be called (and a "click" event dispatched) without actually moving the element. You can define a different threshold using minimumMovement config property, like minimumMovement: 6 for 6 pixels. https://greensock.com/docs/v3/Plugins/Draggable
  12. I'll leave that for you to figure out. As I said, do some tutorials and browser around this forum to see how others tried things.
  13. The best thing to do with ScrollTrigger is to remove it! This seems counter intuitive, but ScrollTrigger is just animating something on scroll, so just focus on the animation at first and only when you're happy with the animation add ScrollTrigger back in. CSS is really important when working with GSAP. You have to think about how things are laid out and what they should do. I've stacked all your sentences on top of each other and then animated them from left to right. In your latest pen I see you use transition: all 1s . First of all if you care about performance, don't use all just animate the properties you want to animate, second if you want to work with GSAP you should never use transitions in your CSS, this will break all your animations (or you need to be 100% certain that you are transitioning something that is not animated by GSAP) I highly recommend you do a few tutorials before jumping in and creating these complex animations. GSAP has a dedicated channel teaching you all about its tools and our @Carl has videos on topic that go beyond that. https://www.youtube.com/c/GreenSockLearning/videos https://www.youtube.com/user/snorklTV/videos https://codepen.io/mvaneijgen/pen/OJZjyWM?editors=0010
  14. Yes you can, but you need to fix your layout so that the width of each item has the correct size. Read my comment.
  15. You can add the snap property to your ScrollTrigger , this will add points on the whole timeline on which the ScrollTrigger will scroll to if it is close. How ever your layout needs to be setup for that. E.g. the width of you .pdata elements all need to be the same width. Right now your .data-whole element has a with of 500%, which is just a random number and thus will not line up. Here is an example of it working, but I couldn't get the width to play nicely, so you'll have to fix that for it to work as you want. https://codepen.io/mvaneijgen/pen/jOxwKGb?editors=0100
  16. Hi @LM17 welcome to the forum! ScrollMagic is a third party plugin and is not something that GSAP supports, but great news GSAP has it's own scroll plugin called ScrollTrigger which is build for GSAP and is really easy to use! It is up to you which one you like to use, so if you insist on using ScrollMagic be sure to hop over to their support page https://nerdpool.io/support/scrollmagic I also see you're using the syntax of GSAP 2, but are loading GSAP 3 take a look at the migration guide Now that I look at your pen even closer, you're loading a lot of duplicated libraries! I've add some comments behind them. <script src="//cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/ScrollMagic.min.js"></script> // not a GSAP libary <script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/plugins/animation.gsap.min.js"></script>// not a GSAP libary <script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/plugins/debug.addIndicators.min.js"></script> // not a GSAP libary <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.1/ScrollTrigger.min.js"></script> // GSAP scroll libary works like ScrollMagic, but is build for GSAP. Needs to be loaded after gsap.min.js <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.1/gsap.min.js"></script> // The latest GSAP version <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js"></script> // A really old version of GSAP, dont use this one! I would take a step back and watch some tutorials to get a better understanding of what you could do. This is a great introduction on ScrollTrigger , if you choose to use it (you're loading it) and also take a look at the demo page, there are a lot of examples that can get you up and running https://greensock.com/st-demos/
  17. mvaneijgen

    Performance issues

    Your pen wasn't doing anything, so that will make it really hard for someone to come in and debug what is going on. I've tweaked it a bit to get something working, but it doesn't seem to do the same thing as in your live site. I've add some comments in the pen at points where I noticed somethings, eg your tweeting x with a percentage, xPercent is made for that. What you could also try is add will-change: transform (will-change: PROPERTY_THAT_WILL_CHANGE) to your CSS. I also see a lot of other animations on your site, you could try disabling them one by one to see which one is the culprit. You could also try disabling individual tweens to see if one is miss behaving https://codepen.io/mvaneijgen/pen/zYjzZbK?editors=0011 Post back if you found anything and we love seeing minimal demos where the issue is clearly shown.
  18. Yep looks good. That is the position parameter, that one in particular means "play at the sametime as the previous tween", There are a lot more variants (see the docs) I highly recommend watching some of the videos from Greensock, just to get a feel for what is all possible, that will get you up and running so much faster and while your at it also checkout @Carl videos https://www.youtube.com/c/GreenSockLearning/videos https://www.youtube.com/user/snorklTV/videos
  19. This is done by increasing or decreasing the end: value of your ScrollTrigger . Yours is set to end: () => "+=" + document.querySelector(".data-whole").offsetWidth As I read your question correctly you want to have it move faster? Then you could (document.querySelector(".data-whole").offsetWidth / 2) this will make it twice at fast.
  20. Ah, you've found the utils! Have you also seen gsap.utils.wrap(), that one does exactly what you discribe, it pick either or item from the list. You can give it a index to let it figure out which one it should get, so in this example I let it pick the first value based on the index and for the to tween I get the current index + 1 (so the second value) and this alternates through out the list. https://codepen.io/mvaneijgen/pen/MWGmqxK?editors=1010
  21. Hi @vishnu10010 welcome to the forum! When working with GSAP I always like to start with a timeline instead of single tweens. I've learned that an animation is never as simple as one tween and even if it is, I can always make my code simpler when it is done. But if you start out with only the option of one gsap.to() tween you're limiting your self. So what I've did is converting your ScrollTrigger tween to a timeline and add a second tween to this timeline that rotates the svg shape 360deg in the time that your slides move in. I've set it so that both tweens play at the same time using the position parameter ...}, "<"), this one means play with the previous tween, but there are a lot more! See the docs if you want to learn more. https://codepen.io/mvaneijgen/pen/NWMjMwo?editors=1010
  22. Ha, I thought so! You can! The second value you pass in a forEach is the index of the item. With this you could easily do text[index+1] texts.forEach((text, index) => {...}) Still the first and the last animations need to be different, so you'll need to check if you're at the first index or at the last item in the index, with something like this. if(index === 0){ CUSTOM_TWEEN } if(index === texts.length){ CUSTOM_TWEEN } Hope it helps! Sorry I don't have time to code anything up myself, but be sure to post back if you've got something up and running, but are stuck on something.
  23. Hey back at a PC again, here is what I would do. These are the possible paths you want your shape to travel, so I would overlap these on the current shapes. The break points is where you want them to transition to the next path. Hope that clears it up. Ah cool tool, seems complicated though. If you are looking for a simpler tool check out https://boxy-svg.com
  24. Hi @Fatih Solhan welcome to the forum! What I was thinking is have the shapes as you have them now, but have secondary paths that overlap these shapes. Then split the circle in to (through the middle) and cut the ends/beginnings of the larger shapes. These are the places where you want them to transition. Paths are really particular about where they start/end, so keep that in mind when drawing them. but their is lot's about it on the MotionPathPlugin and through out these forums, I'll try to find some, but I'm on my phone at the moment. https://codepen.io/mvaneijgen/pen/WNJjwdG Edit: these topics are great https://www.motiontricks.com/adobe-illustrator-path-direction-quick-tip/
  25. The best thing to do with ScrollTrigger is to remove it! This seems counter intuitive, but ScrollTrigger is just animating something on scroll, so just focus on the animation at first and only when you're happy with the animation add ScrollTrigger back in. I was looking for the logic in the animation, but I couldn't find it. I myself usually then spend several hours trying to figure it out, while it is usually better to just write it out how it should work and worry about it later how to make it dynamic, so that is what I did. https://codepen.io/mvaneijgen/pen/ZEoejBV?editors=0010 This should be the timeline (this is not dynamic) and now you need to move this code in some sort of loop (I think a ,forEach()) and have checks for if it the frist animation or the last, because those are the only once that are different. Or if it doesn't need to be dynamic use it as is.