Jump to content
GreenSock

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

Leaderboard

  1. OSUblake

    OSUblake

    Administrators


    • Points

      116

    • Content Count

      6,697


  2. Cassie

    Cassie

    Administrators


    • Points

      76

    • Content Count

      859


  3. akapowl

    akapowl

    Moderators


    • Points

      60

    • Content Count

      1,087


  4. GreenSock

    GreenSock

    Administrators


    • Points

      59

    • Content Count

      17,175


Popular Content

Showing content with the highest reputation since 07/29/2021 in all areas

  1. Hey @takachan For anything to work here in the first place, you should load GSAP and ScrollTrigger into your codepen (best via the cog-wheel in the JS section of your codepen - you can even just search for them via the searchbar in that pop-up then). Next up, you have the same ID for multiple elements all over your HTML - that is not valid. You could just change them to classes and adjust your CSS selectors accordingly. Then in your JS you could e.g. create an array with all your wrappers, const items = gsap.utils.toArray('.wrapper') loo
    6 points
  2. Just create an array for both sets of slides. Note that IDs have to be unique. So give your first 5 slides a certain class name, and so on with your second set. let slides1 = gsap.utils.toArray(".slide-1"); let slides2 = gsap.utils.toArray(".slide-2"); slides1.forEach((el, i) => { // here's the matching one let slide2 = slides[i]; });
    5 points
  3. ... and a test using revert() https://codepen.io/mikeK/pen/RwVyvyN Maybe it helps ... Mikel
    5 points
  4. If all the bars need to start at the bottom of the container, I would think randomizing the duration would be the way to go. Or maybe I'm not understanding the desired result here. https://codepen.io/PointC/pen/4c879a2ddc47285fe59044ca5fe04cb1
    5 points
  5. Welcome to the forums, Critingz. I am not exactly sure, I understand what it is you are trying to accomplish, because depending on the height of the window, there would actually be different parts visible, since you are not making use of any specific vh units with regard to your styling. If all you are asking is how to trigger the ST/pin when the boxes hit the center of the window/viewport, you could just set the start to 'center center'. If you are going for the effect, that everything one can see at that point should stay pinned, you would have to either w
    4 points
  6. No, you can't use images. The plugin works by reading the path data from a <path> element, or you can provide the path data yourself in the form of a string. It can't read the contents of an image. There's are no complex shapes, just shapes. Perhaps you are asking if will morph between groups of shapes, like morphing between images, and the answer is no. It only works with path data. Once you load in a svg, you can parse it to get the path data you need.
    4 points
  7. Hey @.mdl, Try a specific position for the SVGs. svg { position:absolute; top: 50%; left: 50%; width: 50%; height: 50%; overflow: visible; transform: translate(-50%, -50%); } Your code could be simplified a lot more. https://codepen.io/mikeK/pen/bGWKWwV Happy scrolling ... Mikel
    4 points
  8. Please don't @ people for help. Posting a huge block of code is not helpful. If you have a GSAP-specific question, please provide a minimal demo. We don't want to see your entire project. Just the issue.
    4 points
  9. Heya! This is looking nice, good job on targeting the correct elements. You can use function based values in your tweens which allow for conditional logic 🥳 I'm passing in an index value, checking if the index is even and then basing the direction off that value. You also had a pretty creative solution there for your scrollTrigger, you can just add a scrollTrigger to a timeline rather than controlling the timeline via callbacks. toggleActions allows you to specify how the timeline will be managed at different toggle points. https://codepen.io/GreenSock/pen/NWjMXNV?editors=1011
    4 points
  10. Hi @IslandScott Welcome to the forum. Please try this: gsap.to(".product", { opacity: 0, scale: 0.95, stagger: -0.1 }); Happy tweening and welcome aboard.
    4 points
  11. Yep, @OSUblake and @PointC are exactly right. One other option: set up your animations with ease: "none" and then you can animate the playhead with any ease you want with another tween: let tl = gsap.timeline({defaults: {ease: "none"}, paused: true}); tl.to(...) .to(...); // here's the magic: gsap.to(tl, {time: tl.duration(), ease: "power3.out"}); // then to go backwards with another ease: gsap.to(tl, {time: 0, ease: "power4.inOut", overwrite: true});
    4 points
  12. 4 points
  13. Yeah - that demo is a bit old and needs updating, but it may be a jumping off point. This is the original thread for that one: Happy tweening.
    4 points
  14. You can animate the timeScale of your animation. rotation mouseover / leave (codepen.io)
    3 points
  15. Hi Scott, I recommend using encapsulated code for each image you have, so you can treat each element individually (like a component) I have created a demo so you can see it. I hope this helps. Cheers, Nico https://codepen.io/nicofonseca/pen/56309eaf73897ed36842da7cd99ee922?editors=1111
    3 points
  16. Hey, hello there! First off, make sure you load GSAP - looks like you forgot that in your codepen demo. If you want to trigger anything at a specific point, set/adjust the start value. If you don't set a start for your ScrollTrigger, it will default to 'top bottom' for non-pinning STs and to 'top top' for pinning STs. The first value is referring to the trigger-element and the second is referring to the viewport. So start: 'top top'e.g. would trigger when the top of your trigger-element hits the top of the viewport. Also it's always good to
    3 points
  17. Hello there. Looks like the problem is, that you are setting a snap in your defaults but are not defining where to snap to. I just added a snapTo: [0] and it already doesn't jump to the top of the page anymore for me. So you'd have to declare some logic for when to snap. The way you have it though, snapping won't happen when any of the ScrollTriggers you defined is not active - so if you want snapping to happen all along the page, maybe set a ScrollTrigger that spans across the whole scroll distance of the page and declare some logic for the snapping only for that
    3 points
  18. Perhaps you meant like this? A Pen by GreenSock (codepen.io) Elements can select their children. https://developer.mozilla.org/en-US/docs/Web/API/Element/querySelector https://developer.mozilla.org/en-US/docs/Web/API/Element/querySelectorAll
    3 points
  19. If you're not animating anything and just want to pin you can do ScrollTrigger.create() instead. A bit more readable maybe? https://codepen.io/GreenSock/pen/vYmzGWV
    3 points
  20. You're recreating the blob on every mouse move. Not good. You should probably just move the entire container. I just updated my demo for v3. SVG Blob (codepen.io)
    3 points
  21. 3 points
  22. *Cassie Yes - the <path> element is what is used to define detailed shapes, and the string inside the d attribute is what morphSVG needs. No - Inline SVG, this just means SVG that is in the DOM so that the path data can be accessed by Javascript. You don't need the destination path to be in the DOM either, that can be stored as a variable. morphSVG can't access paths inside an img tag, as far as JavaScript is concerned that's just an image. Not sure what you mean by regardless of the tag img, svg etc? If it's referencing an image it won't wor
    3 points
  23. That's a totally valid technique - just beware that it's embedding function calls into the timeline instead of the actual animations themselves, so you cannot effectively control the entire animation as a whole (which may be absolutely fine, depending on your use case). For example, you couldn't pause() the sequence or reverse() or timeScale(). Here's what I often do: function step1() { let tl = gsap.timeline(); tl.to(".foo", {x: 100}) .to(...); // add more animations... return tl; // RETURN THE TIMELINE! } function step2() { let tl = gsap.timeline(); tl.to(".bar", {y: 100})
    3 points
  24. Hi guys, I did it , I figure out how to create this animation https://codepen.io/longd/pen/oNWMYbd
    3 points
  25. To run native modules in the browser, the script tag has to have a module type on it. <script type="module"> import { gsap } from "./node_modules/gsap/index.js"; gsap.to(".foo", { x: 200 }); </script> But I don't want to confuse you with that, because basically nobody does it that way because they use some sort of build tool. I would recommend using snowpack or parcel to get started. With those, you don't have to worry about the script tag, and you can import GSAP using the node style import shown on our installation page. import { gsap } from "
    3 points
  26. Hello there. It's best to create your ScrollTriggers in the order of appearance on your page. You've got that first ScrollTrigger in your init() function which is being called on load of your Lottie, it looks to me - but that other ScrollTrigger is not in that load event - so chances are pretty high, that it will be created before the other ScrollTrigger - and then it can not take the pinSpacing of that other ScrollTrigger into account. This is what I think is the core issue. If you do not want or can not create your ScrollTrigger in order of appearance, you might want
    3 points
  27. You mentioned in your PM to me that you were getting large files with base64 png data when you export. Do you happen to be exporting with a gradient along the stroke or something like that? I ask because I'm not sure why AI is trying to export as an image, but a gradient along a path would certainly make that happen. Take this little swoop with a gradient example: https://codepen.io/PointC/pen/d7fdbb57ccbe78689bd67d6d50c7cd1c It's not very sharp and has a large amount of data to render the png. The problem is that it doesn't look good at all now and far worse if you tri
    3 points
  28. I have a bunch of AI/SVG tips and articles. https://www.motiontricks.com/better-svg-exports-make-animations-easier/ https://www.motiontricks.com/use-background-rectangle-with-svg-exports/ https://www.motiontricks.com/adobe-illustrator-path-direction-quick-tip/ https://www.motiontricks.com/organic-morphing-getting-needed-points-from-adobe-illustrator/ https://www.motiontricks.com/cut-your-path-start-points-in-adobe-illustrator/ Happy tweening.
    3 points
  29. Not sure which you ones you are referring to. The point was that you can't use images and that you can't morph between a group of shapes*. For the parsing part, I was referring to dynamically loading SVGs. https://codepen.io/osublake/pen/27ecfcb76a799484b07a1d6ef75ba6b3 If you're morphing between a group of shapes, like a Chinese character to a shape, you will probably need to merge all the paths into a single compound path. Instructions on how to export SVGs.
    3 points
  30. Hey @Xurshed, It's beyond the scope of these forums to code up solutions for you, but why don't you give it a go? We can provide pointers if you get stuck. I'd start off by creating a text animation with splitText and an image with a container set to overflow hidden. Once your timeline is working nicely - Go ahead and hook it up to scrollTrigger.
    3 points
  31. <path> elements don't have an "x" or "y" attribute. That has nothing to do with GSAP - it's just how SVG works. There are two ways to control their position: Alter the path data itself (the stuff inside the "d" attribute). That's where all the coordinates are. Transforms (literally the "transform" attribute...but in GSAP you can set those with the "x" and "y" shortcuts). Example: gsap.set("#pathID", {x: 70, y: 50}); Does that answer your question?
    3 points
  32. That actually still is a whole lot of code to look through - like your whole website pushed into codepen. Debugging live websites is actually way out of scope for what is offered as free support in these forums - that's why I asked for a minimal demo. But I noticed that you appear to be loading content dynamically via JS after creating your ScrollTriggers, right (at least on your website, it appears not te be the loaded in codepen)? ...for example, your "Mes compétences" section is way taller in height on your website than it is in your codepen demo. Since the Scro
    3 points
  33. There's no bug. You can't animate a background image like that. What should the background be at 50%? GSAP is just doing string interpolation. It would be the same as doing this. It's just finding n-o-n-e and filling in the blanks. let obj = { backgroundImage: "none" }; gsap.to(obj, { backgroundImage: 'url("http://atlantaplanningguys.com/wp-content/uploads/2010/07/Image-2-the-numeral-4.jpg")', onUpdate() { console.log(obj.backgroundImage) } }); backgroundImage (codepen.io) Just use .set() instead. gsap.set('.bg',{ backgroundImage
    3 points
  34. Just another concept https://codepen.io/mikeK/pen/OJbjYrd Happy tweening ... Mikel
    3 points
  35. Check out the common mistakes page. A timeline shouldn't have nested scroll triggers.
    3 points
  36. That's a great pro-tip from @PointC. Also, check out this video to learn the setting in the stagger object which supports staggering from "end" and "center" and "edges" https://codepen.io/snorkltv/pen/BajxopX Check out my Free Course: GSAP 3 Express for my tips like this.
    3 points
  37. Thanks for putting that together. It looks like you have the right idea! Mask the sections, position them on top of each other and then animate their x/y values https://codepen.io/GreenSock/pen/rNmdELE?editors=1011 You were targeting some elements that didn't exist and using an older version of GSAP syntax, but aside from that there's nothing more technically that we can help you with here. As someone who's done glitchy animations before, it's fiddly work! Aesthetically it doesn't look right yet, but you're on the right track. What's left to do is to tweak the values, adjust the s
    3 points
  38. Reverse just plays the animation in reverse, so it's going to have power3.out ease. There's really no way to have reverse use a different ease unless the animation has played all the way through, otherwise it would jump.
    3 points
  39. it sounds like passing an array of durations into the config object may do the trick. https://codepen.io/snorkltv/pen/wvdmdNp
    3 points
  40. Happy to help and glad that this was what you intended Please note though: it is not in dead center at this point - and I noticed it isn't, because your .boxes_holder doesn't have a height in CSS. You could just set the height of 300px on that container, too - and if you wanted, also change the height of the .box to 100% then to make things more convenient for the future. Happy tweening and scrolling! Edit: I just double checked - and what I mentioned above about it not being dead center does actually not seem to be the case at all - it is. We
    2 points
  41. Whoops, I forgot to set the trigger to the boxes-container in my codepen above. Here it is triggering when the boxes are in center of the viewport now. https://codepen.io/akapowl/pen/1a2759655e1be78e2588b1f2465bbd0f But I still don't really understand what it is you are trying to do, sorry. If you want specific parts of your page to be visible when pinning, no matter how small the window is in height, you will have to adjust your CSS styling to react to those height changes of the window.
    2 points
  42. XD doesn't have html export, but it's good for SVG, and for prototyping animation. It has paid plugins to export html, but code I've seen from those looks too bloated for me. We did some banners that used dynamic html text in a div on top of canvas animation done in Animate. There should be an easier way to keep text consistently crisp with Animate, but I haven't tried it lately
    2 points
  43. Interesting. I'm seeing with the same issue with 0. Looks like GSAP's cache isn't being cleared. Stand by while we look into this.
    2 points
  44. It's okay, everybody was new to it at some point. And don't worry, once you get the hang of it, it will become more intuitive every time you use a concept like this. So you have that array of items with the class of wrapper there - good. What you want to do is for each of them to create a ScrollTrigger, right? So you would have to put that creation of the timeline (which has the ScrollTrigger attached) into the forEach loop but after setting up your variables. For the trigger-element of the ScrollTrigger you then set one of your variables or the item of
    2 points
  45. Hey @IMTanuki It's the duration of the tween. Have you checked the docs? https://greensock.com/docs/v2/TweenLite var photo = document.getElementById("photo"); TweenLite.to(photo, 2, {width:"200px", height:"150px"}); The above code will tween the width and height properties of the <img> DOM element with an id of "photo" from whatever the current values are to 200 and 150 respectively over the course of 2 seconds. TweenLite is part of a rather old version by now though. You might want to consider updating t
    2 points
  46. I don't really understand what you're trying to do, but I'd definitely recommend animating transforms like "y" instead of margin-top if you can because they'll perform better. Here's what I thought you might be looking for: https://codepen.io/GreenSock/pen/MWmGWRY Hopefully that gets you moving in the right direction.
    2 points
  47. This is what I'd do: https://codepen.io/GreenSock/pen/NWjYQox?editors=0010 I like pressing a reusable function into service for things like this. That way, you can leverage it in as many ScrollTriggers as you want.
    2 points
  48. I just had the same issue with my project. Turns out I had an element that I transformed to the right and it was pushing the rest of my page out to the right, but not the pinned area.
    2 points
  49. Ah, I see the problem now. When there's a screen resize, it triggers a ScrollTrigger.refresh() which basically means that ScrollTrigger has to undo any of its pinning and restore the page to its original state so that all your CSS/layout is implemented as expected and then it can redo all of its start/end measurements at that new size, then restore any pinning, etc. It intentionally doesn't force the scroll position back to the very top for various reasons (I can explain if you want...just ask). The reason position: sticky is contaminating things is because it affects
    2 points
×