Jump to content

Visual-Q last won the day on April 3 2021

Visual-Q had the most liked content!


  • Posts

  • Joined

  • Last visited

  • Days Won


Everything posted by Visual-Q

  1. Interesting... If you slow it down and you watch the logging, observe that it always returns 1 on the reverse of the Yoyo almost like it's counting two different states one iteration for the yoyo and a second for the repeat. Might be a bug https://codepen.io/Visual-Q/pen/gOgwXxO
  2. Kind of hard to tell as I can never manage to commit Regex rules to memory. but if as you say it only fails with numbers including "," that would seem to point to a failure in the Regex. I would try logging out those values to be sure they are yielding the right results. Assuming an issue with Regex maybe this will help. https://stackoverflow.com/questions/6649327/regex-to-remove-letters-symbols-except-numbers If no luck with this please try making a codepen if possible so we can take a closer look.
  3. You can do something like this but of course it's not actually distributing things like yours just overlaying them. Maybe Jack or someone will come along with some better advice. There's likely a better way to do it I'm not that familiar with this utility. https://codepen.io/Visual-Q/pen/MWJezEQ
  4. Did you mean something like this? https://codepen.io/Visual-Q/pen/PoWzdPj
  5. I don't think flex positions are directly animatable so you could use top, padding, margins , transforms... whatever you find easiest instead. You also might want to look at the new flip plugin https://greensock.com/docs/v3/Plugins/Flip https://codepen.io/Visual-Q/pen/BapoWPB
  6. Does this do it, note as requested it starts to fade in when section 3 hits the middle however the box at that point is positioned in the center of that section which has only travelled halfway through the screen and therefore is at the bottom when it starts to become visible. https://codepen.io/Visual-Q/pen/RwKWGgq
  7. Sorry wrong pen meant to post this one https://codepen.io/Visual-Q/pen/YzNyqmW
  8. Was having a bit of trouble understanding exactly what you wanted to occur with the two scroll triggers this what you were after? https://codepen.io/Visual-Q/pen/vYgNLWQ
  9. Assuming assets are propery enueued in php they would already be accustomed to working in the functions file. If they are manually added then yeah you could do it all in js something like: if ($("body").hasClass("home")) { //check your home page to see what unique classes are appended to the body // do stuff } or if (document.body.classList.contains('home"')) { //check your home page to see what unique classes are appended to the body // do stuff }
  10. I usually use if is front page: https://developer.wordpress.org/reference/functions/is_front_page/ to detect home page.
  11. Hey Samuel welcome to the forum. It's a bit hard to diagnose without context so hopefully you'll be able to get a codepen up. A simplified test case is usually easier to diagnose than a complex example so you might try something basic just to illustrate your issue. In the meantime check out this page it covers a lot of common issues people have and includes a section about nested scroll triggers which might apply to your situation.
  12. Zachs answer about animating different elements made me think you might also animate different properties to move the same elements as well. Possibly set up the css so you can use Left,Top with one animation and the x,y transforms with the other. I believe this could solve the conflict and should allow everything to end up in the right place. Or you could use x,y with xPercent yPercent: https://greensock.com/docs/v3/GSAP/CorePlugins/CSSPlugin https://codepen.io/Visual-Q/pen/WNoLYMB
  13. Jack's is definitely a better solution though it still creates intermittent problems depending on when you scroll. It's an interesting issue though, even if it hasn't come up before I can certainly see how people might want an initial animation that subsequently reacts to scroll input. The question is how best to handle it so it doesn't break the user experience.
  14. The issue is if you start scrolling before the initial animation is done the scrub and start animation fight for control. You could try disabling scrolling till the first animation is complete but that might be confusing for people. At the very least make the fist animation faster so the scroll disable doesn't last so long. https://codepen.io/Visual-Q/pen/VwmqKMN
  15. Not entirely sure what you planning to do here but adding immediateRender: false may help. https://greensock.com/docs/v3/GSAP/Tween https://codepen.io/Visual-Q/pen/mdOzbwx
  16. And check out some of the codepen examples often makes a huge difference in understanding how it all fits together when you look at other coded examples: https://codepen.io/collection/KiEhr https://greensock.com/st-demos/ Plenty more as well just look around for them like Blake's page here: https://codepen.io/osublake/ And Craig's motion tricks site https://www.motiontricks.com/
  17. Zach answered a question in the banner adds forum that might be helpful to you. Uses timeline and event listeners and also demonstrates clip-path. https://codepen.io/GreenSock/pen/NWbBQrX
  18. If you say so, I never use it I usually move or transform things. Hopefully this helped though.
  19. Yes I think you're supposed to use clip-path or something now but I think the syntax is similar and concept is basically the same.
  20. Are you asking about the syntax for animating clip:rect note I believe that has been depreacted in favour of clip-path: https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path However this is the syntax still seems to work: Updated to loop through array https://codepen.io/Visual-Q/pen/vYyzLoe
  21. There's number of examples of horizontal slider sliders on this page https://greensock.com/st-demos/ Based on the example from the site your showed and given that you want a timed auto slide and user initated swipe type action you might just be able to setup a timeline that changes at required intervals and then use a wheel event, and any other interactive events that are anticipated, to manually trigger a slide, you could use the event to advance the timeline at the same time perhaps to a label to keep things running smooth. https://developer.mozilla.org/en-US/docs/Web/API/Element/wheel_event Repeat delay might also be useful here https://greensock.com/docs/v3/GSAP/Timeline/repeatDelay() As far as adding removing classes a callback could do that so yeah you can add in functions wherever you need them. See call() and add() in the docs: https://greensock.com/docs/v3/GSAP/Timeline One more thing of course Zachs tips are a good place to start when thinking about this type of thing https://css-tricks.com/tips-for-writing-animation-code-efficiently/
  22. I have no idea what your trying to do but it seems you can set the animation-play-state with gsap. I'm not too familiar with css keyframes but I imagine you could control other properties in a similar fashion. https://codepen.io/Visual-Q/pen/NWbzJRp
  23. You can get the height of an element a couple of different ways, here's a couple of links to methods for that. Using it within the timeline you could use a callback at an appropriate point to get the values when you need them. Not sure what you're meaning to do with it so hopefully this points you in the right direction. https://www.w3schools.com/jsref/met_element_getboundingclientrect.asp https://www.w3schools.com/jsref/prop_element_offsetheight.asp