Jump to content


  • Posts

  • Joined

  • Last visited

About evomedia.lt

Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

evomedia.lt's Achievements

  1. 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.
  2. 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
  3. @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).
  4. 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
  5. 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
  6. 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
  7. 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?
  8. 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?
  9. 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
  10. 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.
  11. 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
  12. 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?
  13. 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
  14. 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
  15. 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.