Visual-Q last won the day on March 16

Visual-Q had the most liked content!

Visual-Q

Moderators
  • Content Count

    283
  • Joined

  • Last visited

  • Days Won

    1

Everything posted by Visual-Q

  1. Visual-Q

    Content jumping 1px in iframe on Safari while animating

    I'm not seeing any animation in the iframe in your link to evaluate it? There's several things that might cause something like this happen but we would need to observe it in action to provide any suggestions. Also if possible it's best to create it in a codepen to help us better diagnose. On that note as well codepen embeds content in an iframe, you could also inspect their settings for a solution. UPDATE: I see Carl beat me to it, but I'm not seeing anything in the iframe on my machine???
  2. Visual-Q

    Animation smoother with onUpdate function

    Yeah it's kind of hard to determine the issue since I can't see it on my machine. Blake made a smooth scroller awhile back that might be worth looking at for inspiration.
  3. Visual-Q

    Slider GSAP for rtl

    I tried it high up on the inheritance chain on the body and it breaks the slider however you can set direction: rtl; in the css for text block items and it seems to work fine, note you'll have to remove text-align:center.
  4. Visual-Q

    New Safari Bug

    And it's also worth noting that iE11 doesn't support it and Edge support is only partial, so depending on your needs it may not be a good option at this time.
  5. Visual-Q

    Animation smoother with onUpdate function

    it's smooth on my imac though I don't have a retina display. Maybe in the full code you've got some kind of throttling added that I'm not seeing but if I'm interpreting it correctly your code appears to create a new tween and overwrite the previous every time the event listener sees a delatY change. Maybe you could refactor it to throttle the number of tween calls and pass the dynamically changing deltaY to the tween in a modifiers function? Not sure if that would work better but it seemed logical to me. Also you're doing a lot of console logging and writing the changing deltaY to a data item, these would also probably be slowing down execution.
  6. Visual-Q

    Carousel with a curl effect

    Yep there's nothing stopping you from using the technique that page uses, it's a fairly simple solution that makes it look like the shape of a mask is changing when it's really just moving a container up. If you study the way the elements and css are constructed and duplicate it the elements can be animated by gsap. It looks like the mask shape is achieved by a large border radius on the outer container. The container moves up while the inner div's background image is moved counter to this to maintain it's position on the screen. A timeline with two tweens targetting an array of the slide elements and fired by deltaY on mousewheel listener may be all you need. I actually like this solution, it makes it look like something complicated is happening but it's just clever css.
  7. Visual-Q

    Text fill on hover

    Maybe that's why Petr Tichy hates tomatoes.
  8. Visual-Q

    Greensock and WordPress and ATOM

    That's an interesting article that shows a rather specific implementation for loading js libraries with a plugin. If you're just getting started with Wordpress though it's probably a bit much to digest. If you're experienced you can evaluate whether it's a good solution for you. To use gsap you basically ad it like anything else to wordpress using enqueu: https://www.wpbeginner.com/wp-tutorials/how-to-properly-add-javascripts-and-styles-in-wordpress/ Then of course you have to learn how to use gsap. I would think in theory that if LiveIcons has properly licensed and is including the gsap with the bonus plugins then you could access them if the plugin is installed but they would only be available on the site it's installed on. This is just a guess though. Did you mean the editor Atom: https://atom.io/ I wouldn't expect it would be different than doing anything else in atom with javascript. I don't use it.
  9. Visual-Q

    Effect ultranoir

    There's a lot going on in this including gsap but if you mean the black texture with the mouse over effect it's definitely happening in canvas. If you inspect the sources there's js file chunk-vendors... which might point you to what library if any they are using. You can see gsap in there and various others.
  10. Visual-Q

    FullPage.js and GSAP not firing onLeave animation

    I believe you may have an issue with immediatRender on the fromTo tweens. See the following: https://greensock.com/immediateRender
  11. Visual-Q

    Strange vertical lines between boxes on first play

    Interesting thanks for chasing down that error and letting us know, I would have assumed it was a subpixel rendering error. Knowing that it was a calculation error should help with similar issues in the future.
  12. Visual-Q

    Need help. Handle urls the right way

    I'm guessing you want to prevent default and retrieve the href value? As your'e using jquery: https://www.w3schools.com/jquery/event_preventdefault.asp https://stackoverflow.com/questions/2098408/how-to-get-href-value-using-jquery
  13. Visual-Q

    Center dynamic text around curved path

    That's a deep dive into SVG. I played around a bit I could get it to work with 2 separate text items but couldn't manage to line things up with tspans in the same text item regardless of how I adjusted x,y,dx,dy. Of course bear in mind I didn't have clue what I was doing. If you're working with dynamic text maybe you could add some logic to split your strings to write to multiple text items? Then again maybe someone will come along that actually knows about this and has a real solution😵 Found a discussion on STOV about inserting breaks with svg text spans might point you in the right direction. https://stackoverflow.com/questions/49063695/how-to-insert-line-break-in-svg-tspan-element
  14. The worst thing is when you spend two hours visiting forums, rereading documentation, rewriting it ten different ways... end up convinced that you have no idea what you're doing and then you see it... but for the typo, what you had to begin with, was fine. 😵
  15. If I can make a suggestion, there's way too much in your codepen to try and understand and expect people to sort through and debug. Note that scrollmagic is not a gsap product so it isn't officially supported here but lots of folks use it so someone may step up to help but not if they have to spend a huge amount of time trying to parse through your code to figure it out. If your goal is to get an animation to run and reverse from triggers I would suggest you strip this all down to one element and tween and work from there to get your scroll magic actions working correctly, and then maybe someone might help you figure out why it isn't working. Once that is accomplished you should be able to scale it back up to include the rest of your tweens and elements.
  16. This follows the recent thread 'Animating height percent' Jack came up with a great solution using a function for animating to an auto value. In the original, he showed it using a fromTo but what I thought was of particular note was that it can work using just a to tween. I thought it was worth promoting to it's own thread to make it easier to find as we see periodic questions about how to animate to an 'auto' value. I think this pen does a reasonable job of illustrating it.
  17. Visual-Q

    Animating height percent

    Jack's solution can be plugged in to what you have, and seems to work just fine, without having to prerecord heights to an array.
  18. Visual-Q

    Animating height percent

    Ah yes, but with artifice and clever deception, or just plain playing dumb, one can prod Jack to compete with himself... thus revealing the solution.😎
  19. Visual-Q

    Animating height percent

    Leave it to Jack to show how it can all be done in GSAP. I'll add my own humble addition. If you're going to use his solution above and you want to hide the items initially until you're ready to call the animation: add display:none; to .container css and tl.set(".container",{display:'block'}) //or whatever your intended display .fromTo... or you could use visibility:hidden/'visible '
  20. Realistically you'd probably want to avoid having the scrollbar altogether for something like this. Something like this on the body would do it overflow-y:hidden; Otherwise you'd need to add some logic keeping track of where the slides are in the window when using the scrollbar to determine which slide the scroll actions want to target. NOTE this was only just a quick example of how you might address different sized sections, to make it production ready you'd need to examine all the possible interactions and points of potential failure and add the logic to counter them.
  21. Visual-Q

    Animating height percent

    See the last codepen in my second reply it iterates through images of different heights and uses height on parent instead of scale so it doesn't affect the children.
  22. Visual-Q

    CSSRulePlugin not longer works

    I see the error in Safari in both links. I think it's an issue with the pseudo selector. It works if you apply the animation to the ".box" item instead of the '.box:after"
  23. Visual-Q

    Animating height percent

    Or you can set the container to a height of 0 with overflow :hidden. Add an inner container record it's height and animate the outer container to match. If heights were consistent it could be keyed to only one element. Example of iterating through multiple items with different heights:
  24. Visual-Q

    Animating height percent

    Alternately you could consider animating scaleY then you can use a .to tween but the children get scaled with the parent.