Raydoan

Apologies for import the wrong ScrollTrigger import. rather than i include same thing that you have done this pen. but still the have the same issues. for this i imported right scrollTrigger plugin in my project and the horizontal scroll is working. but the problem when the pinned section is trigger that section goes position:fixed and the next section is comming like thisURL as i mentioned before.there is no css issues. i checked properly. this pen same css has in my code. Still not getting the right solution. little bit worried about it

This is the codepen project i created. I don't why it's not working. you can see my all my code for scrollTrigger here. looking for solution. Thanks

There is a problem with gsap ScrollTrigger issues when try to achive horizontal scroll effect on those section and then end of ehis section going to next section. But the problem is when i added pin:true the specific section it's scroll but not pinned on that moment also the next section is moving up before finish the horizontal scroll finished. what i want to achieve https://drive.google.com/file/d/1SpJS5NxL0yK2hs1Ou7G3LSQ3gkvdhcWL/view And What i am facing problem with scrollTrigger when pin:true https://drive.google.com/file/d/1rHEMFfC8JB6GGOEH6MAa8t2jsvdBSXi4/view Here Is my code for Horizontal Scroll with ScrollTrigger let container: any = document.documentElement.querySelector( '.brand-showcase' ); let tl = gsap .timeline({ scrollTrigger: { pin: true, scrub: 1, trigger: container, end: container.scrollWidth - document.documentElement.clientWidth, }, defaults: { ease: 'none', duration: 1 }, }) .to( '.panel-section', { x: -(container.scrollWidth - document.documentElement.clientWidth), }, 0 ) .to( '.panel-item', { opacity: 1, scale: 1, duration: 0.6, stagger: { amount: 0.8, }, }, 0 ); Here Is The HTML Structure for every scroll-item <div class = 'brand-showcase'> <div class="brand-strategy-showcase-container"> <div class="panel-section"> <div class="panel-item"> <div class="showcase-content"> <div class="bss-title">Brand Research & Strategy 1</div> <div class="bss-content"> Spending quality time with our clients in order to uncover what your brand really stands for is by far the most important step. After taking an objective look at your industry and key audiences, we will articulate your purpose, proposition, and personality. From there, we will be able to create experiences that will connect your brand with your customers. </div> <ul class="bss-list"> <li>Market & Landscape Research</li> <li>Market & Landscape Research</li> <li>Market & Landscape Research</li> <li>Market & Landscape Research</li> </ul> <a href="#" class="btn co-btn"> view Project <div class="icon"> <img src="@/assets/img/next_icon.svg" alt="next" /> </div> </a> </div> <div class="showcase-sticky-img"> <img class="item-img" src="@/assets/img/brand-showcase-sticky-img.jpg" alt="Brand Image" /> </div> </div> </div> </div> </div> Hope you understand my issues. Looking for the help from the team gsap or any other coder with gsap master. Thanks in advance

I have created a product list page where every thumb image will have a zoom effect. the zoom effect code is working fine in the pure javascript. but my project is in vuejs and I wanna achieve same effect in my vue component. I already made my component and put some code in vuejs way. but it's not working right way. when I clicked it jumps to top left and then zooming. Here is my sandbox link in vuejs. Maybe I am missing something or there is have a better way to write this pure javascript code to vuejs way. it would be appreciated if any expert takes a look and give me the solution. The zoom effect goal is this. I believe i am very close to this effect. just can't figure out the problem. Thanks in advance.

ahh!! i solved the problem man . Thanks

Great !! it works but a little issue which is it's drop the height in px as inline-style. but i have a nested form inside the loginSection which is big . so what i want is that do height as auto style. is that possible?

Thanks @mikel .This is appriciating. but right now i am in the situation where i don't much time to move gsap 3.0 in my project. so it will be very helpfull if there is any solution gsap 2+ version?

How can I animate height from 0 to auto using the Tweenmax Timeline? I do a lot of research and see some solutions with CSS. But I have already something dynamic with Gsap where I need to animate height from 0px to auto on clicking the item. I didn't find any solution to gsap documentation and any example where I can achieve it. Here is my code to animate on GSAP. import { TimelineMax, Power4, Expo, TweenMax } from 'gsap/all'; const loginSection = document.querySelector('.login-form'); const loginForm = document.querySelector('.login-form form'); const tl = new TimelineMax({ paused: true }) TweenMax.set(loginSection, { height: 0 }) tl.addLabel('start') .set(loginForm, { opacity: 0, x: 50 }) .to(loginSection, 0.7, { height: 'auto', ease: Power4.easeOut }, 'start') .to(loginForm, 0.7, { opacity: 1, x: 0, ease: Power4.easeOut }, 'start+=0.4') when I click on the element rather than it expanding it renders immediately without any animation. But when I use px instead of auto it's working. But it's not my goal. Your suggestion or solution appreciated.

@GreenSock Thanks for you suggestion . I understood that without codepen snippet it's problem to figure out it . but i actually don't understand how can i start to work on this. How they could. There is no API and valid source code on there so that i can understand there workflow. But it's important for me to implement. Thanks again

How can I achieve this scroll animation slider like this acme-experience.com. i just want to know the flow and how i incorporate this animation with Tween Max. I want to do this animation for single image which is should be Slice effect as like as this site when scroll. Expecting help from you . Thank you