Jump to content

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

ZachSaucier last won the day on September 30

ZachSaucier had the most liked content!


  • Content Count

  • Joined

  • Last visited

  • Days Won


Everything posted by ZachSaucier

  1. Hey Andrey and welcome to the GreenSock forums! ScrollMagic isn't a GreenSock product and we don't support it here so you may not get a response from other forum members. Hopefully you will though! Good luck with your project!
  2. Hey Flashdesigner, welcome to the forums and thanks for being a Shockingly Green member! We couldn't do what we do without people like you. You can check what GSAP uses (including Math.random) by searching through the code on GitHub. The only parts not on publicly available on GitHub are the club member only parts. A search there shows that GSAP does use Math.random. What issues are you worried about related to Math.random? Is there an article that you're thinking of? GSAP is hosted on Google's own CDN (and often isn't even counted against you in your kb total) so it shouldn't have any issue being in banner scripts.
  3. Yes, I realized last evening that I mistakenly put the options in the .observe call instead of the Intersection Observer construction. I'll fix that now.
  4. Hello GlitterCritter and welcome to the GreenSock forums. We temporarily disabled them, but we made them accessible again in your account dashboard. You can find the download links there
  5. That would work (it's slightly less performant but you shouldn't notice in the vase majority of cases) if you only have these elements on the page. If you have multiple sets you could do the same but use the container as a reference instead of the document.
  6. https://codepen.io/GreenSock/pen/gOOgwZV?editors=0010 I did several things here: I switch out the anchors that you had for real buttons. There's no reason why you should use an anchor for moving slides/images, anchors are for navigation. I switched your (now real) buttons to use the disabled attribute instead. This is not only more semantic and accessible, but is easier to manage via CSS. I simplified your enable/disable function. You really are just checking two things: 1) is the counter at the first position? and 2) is the counter at the last position? Based on that information, you set the state of the buttons. I changed your (not working) animations for each box to animate the container instead. It's simpler and more logical. I added a resize event on the window to keep it responsive. I assumed you would allow the button to be clicked before the animation completes. If you don't want this, you will need to keep track of the animations and check .isActive(). Let me know if you have any questions about my approach! Happy tweening.
  7. There are several ways to do this, but depending on the behavior that you want, some are better than others. Do you want the images to wrap? Meaning if you press the next button 6 times, do you want it to go back to the first one? If so, do you want it to go back the opposite direction or continue to go in the same direction ("infinitely")? Are clicks during a previous animation allowed?
  8. You'd need to create a timeline for each element and have the target of the timeline animations be one specific element. I'd usually attach the timeline to the element itself so that inside of the Intersection Observer function you could say entry.target.action.play(); Here's an example pulled from another thread:
  9. Do you mean change it so that no green is showing? If so, remove the padding-right on .container__box and change its flex property to flex: 0 0 50%;. I'm betting you could simplify your btnEnableDisable function a bit. What are you trying to do with the for loop with moveBox in it at the end?
  10. Keep in mind that querySelector and querySelectorAll follow the same rules as CSS selectors for element selection. So Rodrigo's suggestion selects the first .anyclass element that is the third div in a section. It would not work in the case of the following: <span>Something else</span> <div class="anyclass">NOT THIS</div> <div class="anyclass">NOT THIS</div> <div class="anyclass">---THIS---</div> <div class="anyclass">NOT THIS</div> This is not an error, it's just how selection works. :nth-of-type might be more useful in cases like this but still could have issues depending on your markup. Most of the time if you need to select a particular element it is more failsafe to add an ID or unique class and select it using that.
  11. You can click on the cog/gear icon in the JavaScript panel to see additional resources being loaded. Can you please modify the pen that I made to recreate the situation that you're describing? You can click the "fork" button to make your own copy.
  12. If you check your dev tools' console, you can see an error about Draggable not being defined. If you add it, it works just fine: https://codepen.io/GreenSock/pen/OJJbgoa?editors=0010
  13. Hello and welcome to the GreenSock forums, Can you please create a minimal demo of your issue? It would make it easier for us to help you.
  14. This is because you kept the bounds. So if a negative x or y value (or a high x or y value outside of .mainGrid's bounds) are dragged to, it will jump to within the bounds. To get rid of the behavior, simply remove or comment out the bounds line of the Draggable create. https://codepen.io/GreenSock/pen/a08e546d7a79a9522b64234747e948e3 To properly snap to the target in the Y direction, you will need to add conditional logic like exists for the X direction. You should be able to just copy what is there, add some variables, and switch the width/x to height/y.
  15. Yes, it depends. Usually if you have sequences that depend on one another you should use a timeline. If there isn't any sequence, a tween is often better (unless you have a lot of different animations that aren't sequenced but you need to control them together).
  16. A minimal demo would make this a bit more clear I think. If you need the same animation to be used in two (or more) areas AND want them to be independent, you should create different instances of them. For example, function createScaler = function() { return TweenMax.to(box1, 0.2, { scale: 2, ease: Sine.easeInOut, paused: true }); } var scaler1 = createScaler(); tl.add(scaler1); var scaler2 = createScaler(); main.addEventListener("mouseover", function() { scaler2.play(); console.log('scale up'); }); main.addEventListener("mouseout", function() { scaler2.reverse(); console.log('scale down'); }); That way you can keep your code DRY but also have two independent animations. Does that help?
  17. Hey EP9 and welcome to the GreenSock forums. I'm confused: you are adding the tween (scaler) to a timeline that plays all the way through, but you're also wanting it to not play? What are you expecting to happen? Why are you adding it to tl in the first place?
  18. Hey Sam, thanks for being a Business Green member! We couldn't do what we do without people like you. Simply by adding will-change: opacity, transform; on .aicon I was able to get the GPU usage down from ~60% to ~16% on my PC in Chrome (compared to the "normal" ~1-2% that Chrome uses on a static page). I don't see any big red flags in your JS code. Maybe another forum member will spot something that I'm not seeing. P.S. I think you'd love GSAP 3! It has built in utility functions that you could use for this sort of thing. You already have beta access as a Business Green member.
  19. I see a visual glitch before the font icons load. Not sure what you're talking about related to the border... Most likely you don't have to worry about it, but why don't you just make the splash screen and see? I'm not sure what you're wanting our help with here
  20. In case it wasn't clear from Jack's post, changing scrollTop to scrollTo fixes it I updated the demo.
  21. Hey DD77. Currently you can't tween to a value of "auto". Instead, you should use a .set() to the "auto" value then immediately use a .from() a value of 0. However, you currently have some conflicting tweens. You're trying to close all of the options and then open the clicked one at the same time. You need to change your logic so that the tweens don't conflict. Other notes: You don't need to use a jQuery selector in your tweens. By default selector strings are parsed using JavaScript's .querySelectorAll() method. You should avoid using jQuery's animate. Plus it doesn't work with GSAP's scrollTo plugin. https://codepen.io/GreenSock/pen/bGGwwmq?editors=0010 P.S. The next version of GSAP currently has a way to tween to a value of "auto" built in
  22. Hey med and welcome to the GreenSock forums. Can you please create a minimal demo of your issue using something like CodePen or StackBlitz? It would help us help you more easily.
  23. There's nothing that jumps out at me as being incorrect. Could you please create a minimal demo so that we can see the issue firsthand?
  24. ZachSaucier

    Floating Animation

    I did in the post above...
  25. ZachSaucier

    Floating Animation

    Like I said, tweening the timeline makes it more smooth. It will take some playing around to get it more smooth. https://codepen.io/GreenSock/pen/JjjKVdB?editors=0010 To get the effect that they have on the site, you'll likely need to put the can in a container and move the container around based on the scroll position as well.