Search the Community
Showing results for tags 'overflow'.
Found 13 results
-
Hello everyone ! I am having his issue of needing to animate elements that are within an overflow container. As you can see here by default, it seems GSAP doesn't pick up the positions of the container being scrolled thus the scrolltrigger never gets activated. The behaviour I'm looking after is that when the first blue square hits the top, the animation gets triggered. Right now, I need to scroll all the way down and then somehow scrolling some more gets the markers moving and triggers the animation (I'm thinking this is due to the pinspacer). If you'd have any thought on how to get around this/ info on the inner workings, it would be highly appreciated. Thanks a lot for any help you can provide
-
I have been stuck here for a week. I'm trying to make a scroll snap from section 1 to section 2 with a delay time for exit animation and reverse. From section 2 to section 4 it can be a normal scroll. I'm using overflow: hidden that I can't let it go. This is the reason that I think it prevents me from scrolling snap and normal scroll. The scroll way I try to achieve is exactly the same as this website: David | Creative Developer (david-hckh.com) Here is the codesandbox : https://codesandbox.io/s/scroll-rfjx9k How can I achieve this ? Please help me with this....
-
Hey there, Scroll trigger is not working when body overflow is hidden. I want the circle to move from top to bottom following the svg motionPath on mouse wheel. Is there any way to make this work?
-
I am trying to use the scrollTrigger plugin while implementing the fix for the safari scroll issue you flag in this article here. When I apply the CSS from this it breaks the pages native scroll and therefore the scrolltrigger doesn't fire. What can I do to resolve this In the section: Stop iOS Safari from resizing the window on scroll body, html { height: 100vh; width: 100vw; overscroll-behavior: none; overflow: hidden !important; } #viewport { position: fixed; overflow-x: hidden; overflow-y: scroll; height: 100vh; width: 100vw; -webkit-overscroll-behavior: none; overscroll-behavior: none; -webkit-overflow-scrolling: touch; } https://greensock.com/docs/v3/HelperFunctions#scrollResize My simple scrollTrigger on the element is just this but it breaks cause the above CSS ScrollTrigger.create({ trigger: '#test', start: 'top top', // endTrigger: '#otherID', end: 'bottom 50%+=100px', onToggle: (self) => console.log('toggled, isActive:', self.isActive), onUpdate: (self) => { console.log( 'progress:', self.progress.toFixed(3), 'direction:', self.direction, 'velocity', self.getVelocity() ); } }); -
Hi everyone, I want to use ScrollTrigger to trigger some elements when the red box reach to the top of screen (or the top of the wrapper ). But the marker(start) doesn't move if you scroll in the wrapper. Is there a way to trigger animation in the wrapper? The box is just for the demo and I want it back to the original shape when the red box pass the end point. Thank you.
-
I'm trying to have .scene1 slide off the page to the left side of my animation. My goal was to add a property of overflow:hidden to a group named .screen-wrapper. The idea is that once .scene1 slides off the screen it would not be seen beyond the white screen. Sadly this is not working. When checking out the code it seem to be taking the attribute. Is there a way to-do overflow:hidden, or am i doing it wrong? Any help would be great.
-
Hello, After looking online and on this forum, I create this new post to see if anyone had the same issue with GSAP Draggable. As you can see on the screenshot below, I use a Draggable instance with type: x to create a main horizontal scrollview. Inside this scrollview, there are several boxes which all have a vertical native scrollview, using css properties : overflow-y: scroll; -webkit-overflow-scrolling: touch; It seems there is a conflict between horizontal Draggable events and native browser scroll when this scroll applies inside Draggable element. It is not possible to drag the mainview if the touch event is fired inside the native scrollview; only native vertical scroll is working. (if you drag on the header, which have no scroll, Draggable horizontal scroll works, but if you try to drag horizontally on the grey block, no horizontal scroll occured) - The issue occured on touch devices : Chrome Android, Firefox. The issue can be reproduced on latest Chrome Desktop with Touch simulated - It works on Safari iOS devices (iOS9, 10+) You can reproduce the issue on the codepen below; You will need to simulate touch events to reproduce. I tried to enable/disable "allowNativeTouchScrolling" but the issue is the same. Do you have any idea how to fix that ? The only solution should be to apply a Draggable instance to replace each native scrollviews, but may have performance issues on low Android devices. Thanks for your help. -
Hi guys I have a weird situation and I cannot explain what is happening Super simple, I basically create a div and set it to have rounded corners. Then set the overflow to hidden. Next I pop an image inside and all I want it to do is rotate inside, but it's glitchy. With the codepen URL for example you can see (while animating) the div temporarily looses it's overflow hidden the and hand is revealed on top. With our website: http://iplabs.com.au/amaysim/history-of-the-mobile-phone/ you can see it sitting there on top of the circle. Removing TweenMax instantly fixes the issue. Any ideas? Thank you!
-
I'm new to ScrollMagic and GSAP, and I've run into a problem with a site I'm making. The second section is all parallaxing clouds, with the section being pinned at the top of the screen. The issue is that on the pin trigger, there is a 'jitter' that happens, which (I'm assuming) is caused by the horizontal scrollbar showing up. If I hide it, there is a vertical scrollbar within the section (also not desired). After some testing to narrow down the problem, I have found it only happens when the cloud in the section flows off of the right side of the screen. I need the overflow-x to be hidden while having overflow-y visible, to go with the design of the site.
-
Hi Is it possible to have a container automatically resize it's height when a div inside of it is moving outside the container's height? in this pen - http://codepen.io/beamish/pen/LNXYGN - will it be possible to have the blue containing box automatically resize it's height when the contained red smaller box reaches the blue box bottom? Thanks, Elior
-
I don't have a live example to show just yet, but here is my problem. I have a button with a shine that runs across it when you roll over. The shine is within a div that has its overflow property set to hidden. This is so the excess shine image is cropped. But when I animate the scale of any other element in my document, it releases the overflow on the button. When I scale an element back to normal size, the overflow property becomes hidden again. Why is the scale property causing that? (ex: TweenLite.to(object, .25, {scaleX:.5, scaleY:.5});
-
Hi, I am using a combination of ScrollMagic and GSAP to achieve a scroll-based (100% height/duration) animation at the top of my page. Everything works great in Safari/Chrome/Firefox, but when I test on mobile (iOS) the animation is all screwy. Seems to be an issue with overflow and/or viewport height, but I cannot seems to find a fix. Apologies in advance if this is an issue related to ScrollMagic (not GSAP), as I am still getting acquainted with both. Live site can be found here: http://aigasd.github.io
-
Hello I was dealing with an issue in Firefox Mobile Browser, where it would not honor overflow hidden when 3d transforming its child. So the parent that had overflow hidden, would have its childs 3d transforms display outside the parents bounds. There is an opacity: 0.99 hack that you can add to the parent your transforming, but in some instances it will cause the layout to get pushed down, and is very very frustrating to debug. .targetElementThatHas3dTransforms { opacity: 0.999; } Firefox Mobile Browser does not honor overflow hidden when using or animating 3d transforms on its child. So i came up with another hack which i find that worked. Apply this to your style sheet: * { outline: 1px none transparent; } I also did some other tests, and found out that if you add this to the element your animating, that uses 3d transforms.. it should also fix that overflow hidden bug: .targetElementThatHas3dTransforms { outline:1px none transparent; } Also if you want to apply via javascript and only apply on FireFox Mobile Browser you can do this: // check for FireFox var isFF = !(window.mozInnerScreenX == null); // check for mobile touch support var isTouch = ('ontouchstart' in document.documentElement); // check for FireFox Mobile Browser (FireFox and Mobile Touch) if(isFF && isTouch){ TweenMax.set($('.targetElementThatHas3dTransforms'),{'outline':'1px solid transparent'}); } I found out the Desktop version of Firefox doesnt like the outline on the element that has the 3d Transforms. And animates slow and blocky in some cases, So above we only add the hack when in Mobile view.. from what i noticed in my tests. This solved the Firefox Mobile Browser overflow hidden bug. Im not sure why the Firefox Mobile browser behaves this way. But I thought i would share this, so if anybody runs in to this same issue, it can provide some help.
.thumb.jpg.73c8d381b3dccb457d6b4a4cdec2b078.jpg)
