Jump to content
GreenSock

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

Leaderboard

  1. OSUblake

    OSUblake

    Administrators


    • Points

      27

    • Content Count

      6,584


  2. Cassie

    Cassie

    Administrators


    • Points

      5

    • Content Count

      754


  3. akapowl

    akapowl

    Moderators


    • Points

      4

    • Content Count

      1,058


  4. iDad5

    iDad5

    ShockinglyGreen


    • Points

      3

    • Content Count

      144


Popular Content

Showing content with the highest reputation on 06/23/2021 in all areas

  1. Hi @akapowl, thanks, that helps. I was stuck under MyProfile -> Activity, didn't realise there also was 'See my activity' un that level. My bad. And the pens also work or me again now. Must have been an issue for me with loading the image.
    3 points
  2. Hey @iDad5 A] You should be able to see your post-history in your profile under the "See My Activity" tab - via pagination you should be able to go back to the very start of your history. B] For me all the codepen dmos above still work as they did before, so I'm not sure, I can help you with that. What exactly do you mean by "none of the pens are working anymore" though? ...do they not show up at all? ...do they show an error in the iFrame? ...do they show, but the animations do not work?
    3 points
  3. Yes, it can be very confusing, and I'm not aware of any good tutorials for it. Just something you have to get used to. They're pretty much the same. killTweensOf is useful if you want to kill more than 1, or just a certain property. useEffect(() => { const animation1 = gsap.to(foo.current, { x: 100 }); const animation2 = gsap.to(foo.current, { y: 100 }); return () => { animation1.kill(); animation2.kill(); }; }, []); // vs useEffect(() => { gsap.to(foo.current, { x: 100 }); gsap.to(foo.current, { y: 100 }); return ()
    2 points
  4. Please check out the classList docs. https://developer.mozilla.org/en-US/docs/Web/API/Element/classList display block (codepen.io)
    2 points
  5. Hey @Moises Arrona Do you mean such a case? https://codepen.io/mikeK/pen/poEPRNg Happy flipping ... Mikel
    2 points
  6. Thanks for making the demo more clear! I blame React. 😉 Your callback isn't keep current when the state changes. Here a couple different ways to handle GSAP callbacks that need to work with React values. https://codesandbox.io/s/upbeat-rhodes-jp4r1?file=/src/App.js https://codesandbox.io/s/musing-pine-wqlhs?file=/src/App.js https://codesandbox.io/s/pensive-mirzakhani-gvfyl?file=/src/App.js
    2 points
  7. Not sure why it wouldn't work as the types are global. You could try telling it where to search in your tsconfig/jsconfig.json. { "compilerOptions": { ... }, "files": [ "node_modules/gsap/types/index.d.ts" ] }
    2 points
  8. You can even animate the progress value for a smoother transition. slider.addEventListener("input", function () { gsap.to(tl, { progress: slider.value, duration: 1, ease: "power3" }); });
    2 points
  9. You can use invalidateOnRefresh and functions to return updated values. gsap.timeline({ scrollTrigger: { trigger: section.parentElement, scrub: true, invalidateOnRefresh: true }}) .fromTo(section, { y: () => -section.offsetHeight - section.parentElement.offsetHeight }, { y: 0, ease: "none" });
    2 points
  10. That's very clear thank you so much ! I converted everything to use killTweensOf, it just seems more readable and economical. I found this reference for useRef, will take a closer look
    1 point
  11. Yep. Did you use the position paramater? Add them all at once. const master = gsap.timeline(); master.add([childTimeline1, childTimeline2, childTimeline3], 0); Or individually. const master = gsap.timeline(); master .add(childTimeline1, 0) .add(childTimeline2, 0) .add(childTimeline3, 0);
    1 point
  12. GSAP isn't animating proxyCount. It's animating proxyCount.current. Perhaps you meant this. gsap.killTweensOf(proxyCount.current);
    1 point
  13. If you want to reset something, it's better to use your own timeline. gsap.to() Basic Usage (codepen.io)
    1 point
  14. Thank you very much, you have helped me a lot, and I will check the documentation thanks, again
    1 point
  15. Hello Thanks for the reply, I have read the doc of this property but it does not solve the problem. The problem occurs when I use a gsap tween that includes ScrollTrigger (if I remove the tween the page scrolls to top normally). This is one of the tween i use, i call it on the "onMounted" page lifecycle hook: gsap.to($element, { scrollTrigger: { trigger: $element, scrub: 1, start: "top bottom", end: "bottom top", }, xPercent: -7, ease: "sine.none", force3D: "auto", }); Regards
    1 point
  16. It's a feature, but you can disable it. https://nuxtjs.org/docs/2.x/components-glossary/pages-scrolltotop/
    1 point
  17. If it's working in codepen but not on your local site and there's no errors, I'm not really sure what we can do I'm afraid. Typo? Conflicting class names/timeline naming? Incorrect loading of scripts or resources? Caching? My advice would be to strip the code down to the most basic bits until it works and layer up again. Sorry I can't be of more help!
    1 point
  18. Hard to tell what the issue is without seeing the code I'm afraid. I really would suggest putting a minimal demo together. You don't have to use any distinguishing features of your project. unfortunately ScrollTrigger can't really prevent the address bar from showing - that's a device/browser quirk. Maybe these tips/articles will help point you in the right direction. Invalidate values on refresh: gsap.timeline({ scrollTrigger: { trigger: section.parentElement, scrub: true, invalidateOnRefresh: true }}) .fromTo(section, { y: () => -section.offsetHeight - secti
    1 point
  19. Thank you so so so soooooooo much Cassie - your solution worked perfectly!!!!! (and with so few lines of code, I'm falling back in love with GSAP)
    1 point
  20. Hey @fjanroid, try to use box instead of elems Happy tweening ...
    1 point
  21. And have a look at this pen for a smooth scrolling solution together with scrollTrigger https://codepen.io/GreenSock/pen/gOgWELo
    1 point
  22. It's hard to say without seeing your local setup. Are you loading your scripts last, and not in the head?
    1 point
  23. Try it out. Every animation has a progress that goes from 0 to 1. It's just a ratio i.e. a percent.
    1 point
  24. Actually, I don't even think you need to use a the scrollProxy. Just animate the scrollLeft on the element. ScrollTrigger Update Horizontal (codepen.io)
    1 point
  25. hey @akapowl thank you for the detailed explanation. I understand the current behavior more clearly now. About the smooth scroll, yeah, I know. I'm only using Greensock's smoothscroll helper on mobile because the desktop view is all horizontal. Hey @OSUblake, not to bug, but did you manage to try it out, eventually?
    1 point
  26. Hello I'm working on a build and want to use GSAPs features to run a enter/leave functions. Got it working well so I can handle some class changes to the body but I'd love it if the trigger points could be vw as the grid is all based on vw units and everything scales from there. Simplified code: ScrollTrigger.create({ trigger: '.my_elem', start: 'top 10vw', end: 'top 10vw', onEnter: enterFunc, onLeaveBack: leaveFunc }); Those two vh units don't work in this usecase (as far as I got with it in any case)... any assistance or pointers woul
    1 point
  27. Could you tap into the window.innerWidth @limbo ? ScrollTrigger.create({ trigger: '.my_elem', start: () => 'top ' + window.innerWidth*0.1, end: () => 'top ' + window.innerWidth*0.1, onEnter: enterFunc, onLeaveBack: leaveFunc }); If not, a demo would really help claryfying your scenario and finding out what could work best for you https://codepen.io/akapowl/pen/cf50ebc76a4f144ab1fab97c62aa979a
    1 point
  28. Hey rag. I recommend using the body as the trigger instead of some other element (whose position might change): https://codepen.io/GreenSock/pen/NWxZPOp?editors=0010
    1 point
  29. Yeah I tried looking at the JS too, but there's just too much in there. I also don't know if you're using the latest version of DrawSVG. If I understand your question correctly, you should be able to resize the screen while the circle draws and it will look fine.
    1 point
×