Jump to content
GreenSock

Leaderboard

Popular Content

Showing content with the highest reputation on 10/30/2022 in all areas

  1. Heya! Sure thing, So you'll have to calculate the distance. You can do this using offsetHeight for each of your elements https://codepen.io/GreenSock/pen/poKjRMJ?editors=1111 I removed the margin top to avoid confusion, but feel free to add it back in, you'll just need to adjust the calculation to include that 100px distance too.
    3 points
  2. You can target any or all of the stops in your gradient. Here's a fork of my demo you posted above. Instead of a tweening the gradient to a solid fill, I've now tweened it to a new gradient. Happy tweening. https://codepen.io/PointC/pen/RwJWwQQ
    3 points
  3. 1. attr:{} is the attribute plugin. I'm more in the habit of specifically targeting attributes that way, but in this case, yes - simply using stroke without that wrapper will work just fine. Sometimes a property and an attribute may seem the same but they aren't. A rectangle for example has an x attribute. These 2 lines may appear the same but they are not. One will translate x:100 while the other targets the x attribute. .to("rect", {x:100}) .to("rect", {attr:{x:100}}) If you specifically want to target an attribute, use the attr:{} wrapper. 2. You'll generally switch hyphenated properties to camelCase. So stroke-width becomes strokeWidth. If that's not to your liking you can also use the hyphenated version, but you'll need to use quotes. These two lines are effectively the same. .to("rect", { "stroke-width": 40 }) .to("rect", { strokeWidth: 40 }); 3. You can use GSAP to set a gradient fill with no problem. That will work with or without the attr:{} wrapper. // add a fill this way gsap.set("rect", {attr:{fill:"url(#someGradient)"}}) // inspect the element and you'll find this fill="url(#someGradient)" // add a fill this way gsap.set("rect", {fill:"url(#someGradient)"}) // inspect the element and you'll find this style="fill: url("#someGradient");" 4. I don't know that you could smoothly interpolate between a linear and radial gradient. A crossfade would probably be a better way to go. You can dynamically add stops with JS by creating the element and adding offset/color attributes, but since the gradient isn't rendered, I don't think it would refresh the changes. If you want to go from a couple stops to multiple stops, I'd probably add all the stops at the beginning and just set the color and offset the same on some of them so it will appear to only have two. You can then loop though and target any or all of the stops offsets/colors . I'd also add that animating gradients is pretty intensive so my recommendation would be to use it sparingly. Good luck.
    2 points
  4. Hi @chrisandrew welcome to the forum! This question is great! You've have a demo and a clear description, those are the once we love! I still need to dive in to how it works my self, but have you seen the .quickSetter() function. Sounds exactly like what you want, but personally I've never used it myself. Hope these resources help! If you find yourself calling gsap.set() many times on the same object (or set of objects), like in a "mousemove" event, you can boost performance 50% - 250% by creating a quickSetter function and using that instead of gsap.set(). Think of a quickSetter like an optimized function tied to a particular target's (or set of targets') property, where it directly pipes data to it and skips convenience tasks in a normal gsap.set() call such as: https://greensock.com/docs/v3/GSAP/gsap.quickSetter() https://codepen.io/GreenSock/pen/WNNNBpo?editors=0010
    2 points
  5. thank you very much, for several days I could not understand why it does not work, you helped me a lot
    1 point
  6. Your problems are related to React. When I remove StrictMode it works as it does in the codepen demo. See this thread for why StrictMode / React 18 can create problems with regard to GSAP And see these Articles for how to use GSAP with React; Especially the parts about gsap.context() and Cleaning Up. You will also likely have to implement some sort of Clean-Up with regard to smooth-scrollbar, but since that is not a GreenSock product, it is not within what these free support forums can offer. You can check their docs for information about their API. https://idiotwu.github.io/smooth-scrollbar/ https://github.com/idiotWu/smooth-scrollbar https://github.com/idiotWu/smooth-scrollbar/tree/develop/docs https://github.com/idiotWu/smooth-scrollbar/blob/develop/docs/api.md I know that there is a react verison/wrapper for smooth-scrollbar, too - maybe that can help somehow. https://github.com/idiotWu/react-smooth-scrollbar Welcome to the forum - and scroll responsibly!
    1 point
  7. Hi there! Performance is an incredibly deep and complex topic and I'm afraid we can't offer free performance consultations here. You're welcome to contact us directly for custom consulting. If that's not an option, some tips. Remove code bit by bit until you find the source of the problem (Sounds like you've nailed it down to the sliders) Are the sliders animating anything other than transforms and opacity? If so, refactor them to only animate using transforms and opacity (these are the most performant properties to animate) Are the images in the slider too large? If so reduce the size of them Are there any error messages to look into? At the end of the day, the more animation and more code and more images you have, the more a browser will struggle. So sometimes the answer is simply just 'do less' Hope this helps!
    1 point
  8. OK you need to do a lot of changes, this is not basically a Greenock issue but a combination of HTML, CSS and JS "issues" Firstly the HTML you should use <div class=" col-sm"> not <div class=" col"> as per the docs https://getbootstrap.com/docs/4.0/layout/grid/ to get a flexible grid that stacks. Next CSS .my-boxes should only have the display:flex class applied on sizes above phone ie 800px only, otherwise leave it as Bootstrap sets it. Lastly the JS needs a rewrite. console.clear(); // Start with a clean console on refesh gsap.registerPlugin(ScrollTrigger); let mm = gsap.matchMedia(); const imageSection = document.querySelector(".main-editions"); const container = document.querySelector(".container-main"); mm.add("(min-width: 800px)", () => { const timeline = gsap.timeline({ scrollTrigger: { trigger: '.container', pin: true, scrub: true, markers:true, // end: () => "+=" + (imageSection.scrollWidth - document.documentElement.clientWidth), // invalidateOnRefresh: true } }) timeline.from('.my-boxes', { xPercent: 100, ease: "none", }); }); I tested this quickly by playing around with your codepen and it seemed to work, if nothing else it will give you something to move forward from. Disclaimer I don't use Bootstrap, and the JS change was a quick and dirty copy and paste, likely a lot could be improved.
    1 point
  9. Apologies for the lack of response so far, but it looks like people are struggling to help with this question. Vague details like 'it's broken' or 'it doesn't work' are very difficult for people to help with. Here are some tips that will increase your chance of getting a solid answer: A clear description of the expected result - "I am expecting the purple div to spin 360degrees" A clear description of the issue - "the purple div only spins 90deg" A list of steps for someone else to recreate the issue - "Open the demo on mobile in IOS safari and scroll down to the grey container" A minimal demo - if possible, using no frameworks, with minimal styling, only include the code that's absolutely necessary to show the issue. Please don't include your whole project. Just some colored <div> elements is great.
    1 point
  10. Hey, I tried it out of curiosity. Codepen And thanks for the link @Rodrigo, it was very helpful.
    1 point
  11. Hi @thiagosib and welcome to the GreenSock forums! GSAP uses both transform origin and SVG origin when it comes to applying transforms to elements. Each property should be used in specific cases depending on the needs of the project. You can take a look at it in this example: https://codepen.io/GreenSock/pen/ZYRqRx/06716224865c2c536cee5b4222d771ee Animating joints and those movements is not the easiest thing to do, but using SVG origin can simplify things quite a bit. Check the docs to learn a bit more about it (scroll down, around the middle of the page you'll find the info on the different origins): https://greensock.com/docs/v3/GSAP/CorePlugins/CSSPlugin If you keep struggling, please create a minimal demo that shows what you have done so far and where exactly you're having problems. Happy Tweening!
    1 point
×