Search the Community

Hello, I want the perspective to improve as the scroll moves down, and then I want the scroll to continue. In my example, the perspective improves, but the scroll does not have a pin, it moves normally. Can you help me?

Hi, Hoping that a genius in these forums can help me out. I've got a project which is using horizontal scrolling, scrollTrigger and smoothScroller. You can view it here: https://orconeau.com/cecilstreet/spaces/location/ The issue I'm having is that when the user scrolls towards the end of the horizontal scrolling section, it's adding a huge gap and not stopping on the last section with it centered. I've spent hours trying to tweak the math but I just can't get it to work properly and I'm pulling my hair out. Happy to set up a codepen but I wanted to see if anyone could have a look at the STAGING link and the code that I'm using and maybe make a suggestion. The CSS is: [data-component="horizontal-scroller"] { height: 100vh; width: 100%; display: flex; align-items: center; justify-content: flex-start; box-sizing: border-box; .cards { display: flex; justify-content: flex-start; align-items: center; width: 100%; height: 100%; flex-shrink: 0; gap: 10vw; .card { width: auto; height: 100%; display: flex; align-items: center; flex-shrink: 0; justify-content: center; background-color: blue; backface-visibility: hidden; overflow: visible; padding-top: 101px; padding-bottom: 120px; box-sizing: border-box; .inner { height: 100%; position: relative; will-change: transform; transform-style: preserve-3d; } picture { img { @include app-breakpoint-3 { width: auto; height: 100%; } } } &:nth-of-type(odd) { background-color: purple; } } } } The javascript is: const horizontalScroller = document.querySelector('[data-component="horizontal-scroller"]'); const horizontalCards = horizontalScroller.querySelector('.cards') const horizontalCard = horizontalCards.querySelectorAll('.card') gsap.set(horizontalCards, { marginLeft: '50vw' }) gsap.set(horizontalCard, { perspective: 750 }) const smoother = ScrollSmoother.create({ smooth: 1.5, effects: true, smoothTouch: false }) const horizontalTween = gsap.to(horizontalCards, { x: () => { return -((horizontalCards.scrollWidth - window.innerWidth * 0.5) + (window.innerWidth / 2 - horizontalCard[horizontalCard.length - 1].offsetWidth / 2)) }, ease: "none", scrollTrigger: { trigger: horizontalScroller, start: () => "top top", end: () => `+=${((horizontalCards.scrollWidth - window.innerWidth * 0.5) + (window.innerWidth / 2 - horizontalCard[horizontalCard.length - 1].offsetWidth / 2))}`, scrub: true, pin: true, markers: false, invalidateOnRefresh: true, anticipatePin: 1 } }); horizontalCard.forEach((card, i) => { const content = card.querySelector('.inner') gsap.set(content, { rotateY: -100, rotateX: 25, yPercent: -10, scale: 2.5, xPercent: 100 }) const tween = gsap.to(content, { rotateY: 0, rotateX: 0, yPercent: 0, xPercent: 0, scale: 1, force3D: true }) ScrollTrigger.create({ trigger: card, containerAnimation: horizontalTween, start: "left 75%", end: "50% 50%", scrub: 1, markers: true, animation: tween }); }); I've got the horizontalTween working and then I have an animation for each .card element inside the scrolling .cards section. The animation in there is doing some funky transforms and the issue is that the scrollWidth is including the transforms when it's determining the width of each card. I think. When I turn it off, the scrolling overflow is better but I lose the effect. Any help would be greatly appreciated. Thanks

Hi, I have some elements undergoing a z axis transform but I need them to maintain their own perspective (using the perspective function on the transform as opposed to using the perspective property of their parent element). When I perform a vanilla z axis animation GSAP will add something like the following style tag: style="transform: translate3d(0px, 0px, 200px)" I was thinking maybe there might be something I could do with the modifier plugin but this seems to allow modifying values before they are concatenated into a templated style update. Does anyone know how I could include a perspective function in the transform. e.g. style="transform: perspective(90px) translate3d(0px, 0px, 200px)" The Mozilla docs use a perspective function in their translate3d reference so it should be valid. I'm just not sure how I can get GSAP to include this modifier. Any thoughts good people of the Greensocks forum?

I would like to know whether or not there are methods in GSAP to animate perspectives. In the codepen I am using a js library call perspective transform. Is there something equivalent on GSAP that besides allowing to edit the 4 points manually allows to animate them? Or how to use this library to animate those points with GSAP

Hi I'm fairly new to greensock, and I'm loving it. I'm making a 3D timeline(or track) that I'm moving eggs forward and backward when scrolling. I've used perspective to get the '3D' effect. But, I've run into problems, getting the egg to 'fall off'/disappear when it reaches the end. I want to make the whole egg disappear/re-appear when it reaches the end, not portions of it as it moves out of the view-box. Is there some cool way greensock can help me do this? Here's the link to the codepen Any comments would be appreciated.

Hi all I am developing an animation software. To deploy an animation also to the web I wrote a plugin which renders SVG and uses GSAP to animate values. Btw...you greensocks are doing a great job <3 Now I added the possibility to add 3d transformations but I get stuck with the perspective in rotationx/y. Is it possible to have a perspective for SVG at all? The output should look like the screenshot.

Hello everyone, I'm new and I'm just starting to use GSAP. I have a project on which I have to do a 3D carousel with a reverse perspective (called "topology star" by some people). To be clearer here is a glimpse of what I am trying to do. Currently I modify an example on Codepen but I do not see how to apply a transformation like this. Can someone help me? Thank you all

Hello ! I'm new using TweenMax. I try to make a slider that flip the image instead of just "sliding". The animation works great, but in order to have some realism, I add perspective on my cards, but the animation is totally broken with it. You can try my CodePen example, and remove/add the perspective to see what I mean. Does someone have an idea ? Thanks !

Hi folks, unfortunately i ran into some weird matrix3d behaviour and i realy hope somebody can help me out ^^ i tried to minimize my problems in this pen to some real basic level. Please first hover with your mouse over those color boxes, because this transition is exactly what im trying to achieve when a certain button has been clicked - after clicking my "do-it" button now you'll see the whole mess i'm in right now ... Basicly my first question before this pen was just: how to shortcut this final z-axis movement of every layer? - because within a timeline the parameter for movement on the x - as on y - axis is just e.g. "... {y: 123} ... " etc - so having this whole matrix3d syntax around seems very unusual? As i was looking for a solution i found this https://greensock.com/css3 At the point where it is about 3d transforms with that grid - exactly that is what iam looking for; unfortunately i wasnt able to catch some code via dev-tools in my browser OK, another thing i noticed in my project where this detail belongs to: if i click the "do-it" again after i reversed it, the whole animation not just play's once, it plays twice? And it adds one more iteration to the count of repeatings every time i reverse and play it again until i reload the whole thing ... I tried already things like kill(), killAll() or clear() ... but it seems i missed something else? Thank you for any help!

Hi, I have a problem with a version 1.18.3 Here is a codepen with 1.18.3 in action http://codepen.io/anon/pen/PNdQdO and here is a same code with 1.18.2 in action http://codepen.io/anon/pen/reZJKE First I have tried to fix my code, which was working before and later i have realized that I have updated TweenMax version. After switching to 1.18.2 everything works fine as before. Is something changed so I need to change my code or this is a bug? Thanks!

Please, could You explain me why the rotationX params doesn't fit like rotationY & rotationZ in my 3D cube test?

Hi Guys, I'm having a few issues with a little page turner I'm trying to build. I started with Rodrigo's pen (Thank you ) and modified it to resemble a simple hard book (http://codepen.io/rhernando/pen/vjGxH/) where you click the pages and they turn. It currently works quite well in Chrome, Opera and Safari, but has issues in IE and Firefox. Firefox nearly gets it, but doesn't animate the page shading on the before element quite correctly (using CSSRulePlugin). It correctly shades the first page as it's rising, but fails to animate the second page as it's dropping (that might make more sense if you view the demo in Chrome first, then in Firefox) IE 11/10 ignore the perspective on the .Wrapper element. I've seen that you can keep the perspective in IE by repeating the transforms on the child elements, but this hurts my head when I try to do this with GSAP by setting values using TweenMax/TweenLite. Does anyone have any ideas? I've not tried Edge yet... will give that a go later.

https://dl.dropboxusercontent.com/u/34687130/work/kynan/tiles/index.html On Safari (or iOS Safari) notice how one tile is over the top of another when it shouldn't be. When I disable perspective, this issue does not occur. I have tried changing the zindex at the correct place, as well as the Z 3D property. Nothing seems to work. Is this a known issue? Thanks.

Newbie here. When using transformPerspective + fromTo and setting alpha:0 to alpha:1 tween never happens. But if alpha value is never set or alpha is 1 to 1 everything works just fine . This is only in FF.

I am developing a Metro UI style tile menu. How do I change Greensock's perspective, effectively flattening the camera zoom as you would in a 3D package? Also, how would I give each movie clip it's own perspective instead of using the entire stage? I have tried to illustrate what I mean in the screenshot. import com.greensock.*; import com.greensock.easing.*; var myTimeline:TimelineLite = new TimelineLite(); myTimeline.insert(new TweenLite(mc, 1, {rotationY:90, delay:0})); myTimeline.append(new TweenLite(mc, 1, {rotationY:0 , delay:0})); myTimeline.play();

I'm trying to make a sign image look like it's swinging back and forth towards the user with the correct perspective. For example where the sign would get wider at the bottom as it swings closer to the camera and then narrower as it swings back. Can something like this be achieved just with skewing or is there some other kind of perspective property? I guess this is as much a regular css question as it is a tweenmax one. Any tips would be greatly appreciated!