Jump to content
Search Community

evomedia.lt

Premium

  • Posts

    42

  • Joined

  • Last visited

 Content Type 

Everything posted by evomedia.lt

1
2
Page 1 of 2  
  1. evomedia.lt
    I'm tasked to fix issues on a website that has a scrollSmoother and a bunch of scrollTrigger (parallax and text) animations. It works great everywhere except for iOS Safari, which only seems to become smooth once gsap is set to force3d on everything. But you're right on the overengineering part. Now that I look at it, I'm looking at it from a dev environment where the screen/device can change on the fly - on a real device there's no need to do any switching so I suppose setting force3d once in gsap.config should suffice.
  2. evomedia.lt
    In my previous thread Jack suggested using gsap.defaults instead of gsap.config to set force3d for all upcoming gsap animations on the fly... The solution works but it all falls apart if I try setting gsap.defaults({force3d:true}) before creating ScrollSmoother instance. It throws console warning: Invalid property force3D set to true Missing plugin? gsap.registerPlugin() And the scrollTriggers inside stop working as intended. Is this a bug or intended behavior? I was only able to track down the error connection to ScrollSmoother so far, however in my app I'm working in, I have to make the initial force3D defaults call on a 1 second timer because it still sometimes throws the error, and I can't properly debug it because stack trace always points to the gsap.registerPlugin(ScrollToPlugin,ScrollTrigger,DrawSVGPlugin,ScrollSmoother); line in my code. In codepen example, you can see how the behavior differs when you set things up in different order. If you toggle force3d first and then setup scrollSmoother it all falls apart, however it has no effect on ScrollTrigger... (The random ball flying around is to check if switching of force3d has effect on created tweens since the ball generates new gsap animation for each move)
  3. evomedia.lt
    Thank you, defaults will be the way to go.
  4. evomedia.lt
    gsap.config({force3d: true}) only gets honoured on new tweens with untouched elements. In my example, if you click on first element, then resize the window to >600px and click the second element, one uses translate() and the other translate3d(), now, if you resize the window (that changes force3d) and keep clicking on the elements they stick to their initial transform variant. Mind, that each click creates new gsap.set or gsap.to animations respectively, so it's not reusing old timeline. Is there a way to force 2d transforms in to 3d globally on the fly as new gsap animation instances are created?
  5. evomedia.lt
    Oh, I have no issue with this - it's just that it looks more like a workaround than a solution so I was wondering if I'm missing some core GSAP mechanics of doing this. Particularly - the ease-in and ease-out from a scrollTrigger pinned animation (before and after it is pinned). Thanks for the response either way.
  6. evomedia.lt
    I'm building an app that has some slides scrolling along with page, however, to make the transition to pinned elements smoother I need pre and post pinning animations. I've built a quick example of my solution, and would like to know if there's more elegant/optimal way to do this? Any input appreciated.
  7. evomedia.lt
    I understand that, but what I don't understand is why it doesn't work with my setup. I mean it's pretty straight forward - .faq-item-container listens to clicks and is 100px height by default. On click it gets an .active class which sets height to auto. Everything else in there is just content and fancy borders inside of that .faq-item-container and if I only animate that with vanilla css or GSAP it works flawlessly. EDIT: My initial example uses max-height instead of height to be able to jump between Flip and pure CSS transitions for comparison. However the results are the same if using max-height or height in Flip. I'm trying to understand how Flip interprets it... Does it record the properties(state) of the selected objects alone or does it take all the nested elements inside of it as well? If it's just a selector properties alone it should act like my pure GSAP solution where it smoothly changes heights from one to another. But apparently there's something deeper going on, and I'm trying to figure out what, because I thought I'm using Flip in the same way that your examples use it, however the borders and item positions themselves jump around when it's in Flip, and yet work perfectly well in GSAP. If it's some sort of error on my side of styling it, that's ok, I just want to know why it doesn't work so I can avoid it in the future.
  8. evomedia.lt
    For now I made a workaround that kind of imitates what I expected Flip to do. Hopefully it will be possible to do this with Flip in the future... https://codepen.io/driezis/pen/VwyPeKQ
  9. evomedia.lt
    @OSUblake is there a way to tell Flip.getState() to only record the "height" changes in the state? It is weird, however, because in the documentation it clearly states that with or without props param set in getState it always records state of and since there are no transforms in my CSS and only height changes there should be no jumping action whatsoever (as proven by a plain GSAP codepen sketch).
  10. evomedia.lt
    Well, to check that theory I made a codepen sample with GSAP animation alone, animating item heights, and there are no such anomalies appearing in the animation. However, it's a given, that gsap can't know the "auto" size, so I just use fixed pixel height, but it still shows that borders don't misbehave if only the height of the element animates... In the css only the height changes so I assumed that Flip would recognize it and only animated that... https://codepen.io/driezis/pen/dyJOKdb
  11. evomedia.lt
    Hello! I'm trying to make an accordion for a FAQ with some interesting border decorations. Animating it with pure CSS transitions technically works, but I wanted a smoother animation. Thus, I tried using Flip. However, if you will try going through different elements in codepen example you will notice that the accordion doesn't act as it should - the items jump around, even though it should be just an element height animation. In this case I used max-height to change the item size because it's the only way it can be animated via pure CSS transitions since height alone can't animate between size in pixels and auto (I tried height with Flip, same result). To see how it works with pure css (which is my desired way of movement) just comment out the Flip line from the JavaScript portion and uncomment the transition in .faq-item-container in CSS. This is what I'm getting with Flip when trying to jump between the items. Any advice would be appreciated
  12. evomedia.lt
    If it wouldn't be too much of a hassle. We've already deployed a project that had Flip functionality, but had to comment it out due to firefox inconsistencies. If you give us the file we'd try to put the Flip functionality back in, test it, and redeploy with nice reveal animations
  13. evomedia.lt
    Awesome! Will I get the updated file through NPM or will have to wait for next update? If so, is the file you linked safe to use for production?
  14. evomedia.lt
    Hello, @OSUblake thanks for taking time to look in to it. Your example works great, tested it on chrome, firefox, android chrome and iOS safari. I looked through the code but for the life of me couldn't find what did you change for it to work. Could you please point out what was changed?
  15. evomedia.lt
    I'm trying to make a gallery (that will eventually become individual slideshows) that need to scale to "fullscreen" and back on click. I've made an example to illustrate my problem: on Chrome it works as intended - images scale up and down from the right position. However, once I run it in Firefox (89.0.1 (64-bit) Win10) only the first image animates ok, then the lower I scroll the more distorted the animation gets - instead of scaling from its place, it seems to jump from the top of the screen or upside down... Would appreciate any insight in to the issue. flip_issue.mp4
  16. evomedia.lt
    Hello Jack, thank you for clarification. You are right, we thought the callbacks were for just the one element. This whole thing cleared up a lot, will be a great help in the future.
  17. evomedia.lt
    Hello ZachSaucier, Thank you for a fast response. We used batch() merely for the convenience of using single selector for the triggers. We had no idea that the functionality of setting things in batch and individually would differ. Your edit of the example works perfectly. Thanks
  18. evomedia.lt
    Hello, we're trying to replace AOS plugin with scrollTrigger as majority of our animations are done in GSAP family of plugins. Right now we're trying to figure out a way for scrollTrigger to put class on elements that are scrolled by, however none of the exposed events give us reliable results. There's a codepen example attached to the post along with a gif animation of what we're getting. The panel on the left shows scrollTrigger activities for each slide and is represented by following signs: Toggle Event: red border around box, Enter event: box with E Enter Back event: box with EB Leave event: small with L Leave back event: box with LB As you can see from the gif bellow, if the scroll happens fast enough most if not all events get ignored and thus the class isn't set for the elements left above the scroll position. Is there any sort of event that would fire once the element has passed scroller-start or scroller-end point regardless of the speed of scroll?
  19. evomedia.lt
    It turns out IE11 has issues with flexbox when flex-basis isn't set (it doesn't support flex-basis: auto). So our workaround for now is instead of setting widths, setting min-width and flex-basis instead. https://codepen.io/driezis/pen/zYqXYKy
  20. evomedia.lt
    Hello, we're working on a full-screen sliding interface and got in to a ruckus when trying to show it in IE11. It seems to be only to drag back the amount of padding instead of whole width of the content. Is this a Draggable issue or is there a way to fix it with css? Thanks in advance
  21. evomedia.lt
    I updated the minimal demo with a "fix" that works for me. Instead of click event I'm tracking for pointerdown and pointerup events. On pointerdown I record the pointer Y position along with timestamp, then wait for pointerup to happen. If pointer moved less than 6 pixels to either direction and there was less than 130 millisecond span between the events I register it as a click/tap and select the item. It's a crude workaround, but at least it works for now.
  22. evomedia.lt
    Hello, I've attached my chrome version screenshot. It seems the issue only happens right after drag/release. Maybe the inertia plugin is interfering with the clicks until the animation is fully done?
  23. evomedia.lt
    Hey @ZachSaucier, I've made a more readable example of the issue. It's illustrated in this codepen: https://codepen.io/driezis/pen/xxVwdQL I also attached a gif to illustrate the problem. You can see that once you drag/scroll only the hover action gets registered when you tap it, and it is kind of random - sometimes clicks go through, sometimes they don't. The screenshot was recorded on my Samsung Galaxy Note 8, Chrome browser. The links work great in Android Firefox.
  24. evomedia.lt
    Maybe try the full pen url (like the one in the screenshot)? For me it shows like the picture attached. Also I am certain that if it shows this behavior with a phone, it will be the same with Android tablets. Hiding the issue doesn't really solve it. Thank you for your patience
  25. evomedia.lt
    Added the meta. Also at least on my phone, the list only shows up in landscape, we'll have a different approach to filter projects in portrait mode.
1
2
Page 1 of 2  
×
×
  • Create New...