Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...

Search the Community

Showing results for tags 'pin'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • GreenSock Forums
    • GSAP
    • Banner Animation
    • Jobs & Freelance
  • Flash / ActionScript Archive
    • GSAP (Flash)
    • Loading (Flash)
    • TransformManager (Flash)

Product Groups

  • Club GreenSock
  • TransformManager
  • Supercharge

Categories

There are no results to display.


Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


Personal Website


Twitter


CodePen


Company Website


Location


Interests

  1. Hello All! I'm trying to recreate this: https://codepen.io/GreenSock/pen/YzyqVNe . But where the left column moves up on scroll then pins, then the right column comes up pins next to it and then scrolls through its content before moving down the page. simliar to this beautiful page: https://oldspitalfieldsmarket.com/ Any advice or guidance would be appreciated!
  2. Hello guys, I can't quite figure out what's wrong with my tween, and was wondering if anyone here could help me out. The scroll animation is working as indented, but the problem is with the buttons. I'm seeing a small jump after clicking on it, most noticeable by a white flash at the bottom. Thanks in advance, Lucas
  3. Hi! Here is a problem. This block moves down because text has 30% width and it has two lines. But script loads faster than text goes on the second line and the block moves down. I can't use <br/> because on mobile it will be other. How to fix it?
  4. Hi there, I'm wondering if there is a solution to emulate a fixed background with GS ? I have created 2 versions of the same site. One uses background fixed with a swipe parallax effect here http://fressko.webflow.io/ the other uses gs to tween the slides in and out of opacity as seen here http://freshko.webflow.io/ all of this is done via scroll magic and it's ability to pin. QUESTION - is there ANY way to recreate the swipe / scrolling fixed background effect from http://fressko.webflow.io/ so I can use it on http://freshko.webflow.io/
  5. Hey all. I'm trying to learn GSAP and am blown away (and a bit overwhelmed) by the immense amount of options. What I am trying to achieve is having a page that has full width sections that are stacked on top of eachother. When the user scrolls, it will scrub but will snap to the next vertical section which ideally would be variable height. On a specific section(s), I would like to be able to add the ability to pin and slide sideways with scrub and snap as well. It would be great if it enabled 'end' where it would unpin to be dynamic such as detecting the offsetwidth of
  6. As far as I see the scrollTrigger pin feature, it acts like `position: sticky` in feel. Scrolled elements move with the same speed as the scrollbar. When an element gets pinned/sticky, it hits a wall and goes from a 100 to 0 in an instant. That doesn't feel very good. Unfortunately I don't have a codepen to illustrate what I want, because.. well, I wouldn't need to ask then, would I? But back in 2017 I've made an animation that comes very close to what I want to do now: https://dumbo.design/airberlin (the laptop mockup as chapter intro) The difference to wha
  7. https://hopeful-almeida-c45621.netlify.app Hi, I couldn't get this to work on codepen, so on codepen is my code and in the netlify-link is how it looks like right now. If anyone can help me how to make it work on codepen it's obviously a big bonus My actual questions are: 1) How can I pin my page2 so that all the content that is scolling fits. At the moment the pin lets go a bit too soon, making me miss the last lines of text under the header "seven". 2) My image in page2 is moving downwards as I scroll, even though I've tried to pin it. Why, and how can
  8. Hello! I got a problem: I created a block that is a trigger for two child blocks. When scrolling the page, the parent block is pinned first until the animation of the first child block ends, and then again until the animation of the second child block ends. In this situation, when the page is resized, the parent block moves down to its own height each time. How to properly organize this animation?
  9. I am working on a website that requires a grid of blog posts to be pinned whilst animating in. Once they have animated in the pin ends and another section needs to follow immediately, unfortunately there is a large amount of white space between these two sections. I have turned off pinSpacing but this has had no effect. I'm not sure what else to try at this point.
  10. When I add pin to element background of scroll is visible Here's my code: gsap.registerPlugin(ScrollTrigger); function gsapanim(){ const locoScroll = new LocomotiveScroll({ el: document.querySelector(".scrollContainer"), smooth: true }); // each time Locomotive Scroll updates, tell ScrollTrigger to update too (sync positioning) locoScroll.on("scroll", ScrollTrigger.update); // tell ScrollTrigger to use these proxy methods for the ".smooth-scroll" element since Locomotive Scroll is hijacking things ScrollTrigger.scrollerProxy(".scrollContainer", { s
  11. Hello everyone. I have a trouble with scrollTrigger, I want to pin #intro > .circle to top, I don't know why I pinned it but it jumps to right as you see in my codepen. I tried trigger: "#intro .container" or trigger: "#intro .circle" but they have the same errors. Please help me with scrollTrigger. Thanks in advanced.
  12. I don't know if this is a bug or there's a lacking on my understanding how SCROLLTRIGGER pinning works. Cause apparently, I'm having this annoying issue of page width increment (to 100%) when pinning the section. So basically, the problem is the second I set the width to 100vw. So, whenever I reach the SCROLLTRIGGER start, and it pins, it just expands the whole section to the rest of the horizontal space of the window (there is somehow additional widths, even though I never set anything exceeding 100vh 🙄). Please, help me and every other people who are facing the same issue us
  13. I have an issue with a pinned div containing svg that shifts on the start of the scroll. I recreated the demo version, but it is more visible in the original version. I have read the docs and all other posts on the topic I could find and tried pinType: "fixed" But it didnt solve the issue for me. Thank you in advance! Screen Recording 2020-12-22 at 19.04.57.mov
  14. Hey guys, Started playing a bit with ScrollTrigger and loving it, great job! Is it possible to pin elements taller than the viewport and make them scrollable though? Like this: https://abouolia.github.io/sticky-sidebar/ check out the "Scrollable Sticky Element" example, try scrolling up and down to see what I mean. Fingers crossed
  15. What`s up, GSAP! I`ve briefly looked through docs to find any mention of the same issue, but seems like i need to ask it here. It looks like pin-spacer (wrapper of pinning element) doesn`t copy exact same CSS styles from pinning element. First of all I`m interested in z-index, as I`m developing complex sections` behaviour with revealing, pinning, swapping and covering sections. And missing of z-index in pin-spacer breaks some of my hacks. Currently, I`m using 3.6.0 you guys gave me a month ago to solve other issues. But it looks like previous versions doesn`t clone z-index as well.
  16. Hello, I'm using Gsap Scroll Trigger with my all my entire pages. I have multiples sections. Every section has different child element. I want to know if it's possible to handle specific part of sections (for example, 15% of a specific one, the same as I do with normal vertical scroll ). But I don't know how to do it and I don't know if it's possible. Praticale example: In the codepen i want something like this this: Apply different animations on different child element of the same parent (.red) relatively to the actual parent that is in the viewport. Thanks for your
  17. Hello, I have a question although I don't know if I can't find the answer here but I thought I should give it a try since I exhausted all other options. I have an image/video that needs to be pin and it's going to be move to another section, so what I need it's to be able to un-pin the image once the center of the image/video hits the center of the content of the section. The problem is that the image can be larger or smaller depending of the size of the screen (since it's inside a grid) so I don't know how to calculate this so the centers always meet regardless of the image size.
  18. TrulyNewbie

    Pinning

    Hi, newbie here. I'm desperately trying to figure out how to pin the second div to the top of the screen, beneath the first div, then releasing it as the div above it ends. Just like - https://jeongsteph.design/ I've tried toggleclass too but I just can't get it and I don't know where I'm going wrong. Please help me Thank you
  19. Hi all, Thanks for the great work on the ScrollTrigger plugin. Its a joy to use! I was wondering if its possible to have a custom offset for the pin functionality? I am animating a video based on the ScrollTrigger progress. Additionally, I want the video element to be pinned at the top. This works just great using pin: true Now I ran into a small issue: I want to start the animation when the element comes into view, but only have it pinned once it reaches the top of the viewport. Setting the start position to start: "top 50%" makes the animation play when the trigger i
  20. so in my codepen i have 3 sections i want to animate the 3rd section in such way that if section 2 fade out at that time section three will fade in and all the transitions will run on scroll but pin will not move. i am new here please help me.
  21. Hi fantastic people of Greensock! I'm a big fan, and a shockingly green member. I'm wrapping my head around ScrollTrigger, and I'm trying to achieve an effect like the one here: https://www.easytigerfilms.fr/en/actualites My codepen demo only deals with one image for now. I've pinned the images so the basic overlay effect works when scrolling down, but when I scroll up (logically), the translation occurs backwards. I'm stuck there: I don't know if I should use disable()/enable(), create two triggers, toggle classes.. I would like the active image to stay fixed in the frame
  22. Hi, I'm trying to successfully pin two separate elements on the same page: 1. The first section (100vh) which is stacked above the rest of the page. As I scroll I'd like it to move yPercent: -100 out of view. The rest of the page (the other sections) I would like to act normally, no stacking, it should move as a single body. 2. I have a sticky nav in the middle of the page that I'm trying to pin to the top once it's in view and end at the end of the html I'm working off of the `Layered Pinning From Bottom` ScrollTrigger example. I have 1 working b
  23. 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
  24. Hi guys, is it possible to make something like this with ScrollTrigger pin? https://katiforner.com/ scroll to "Featured project" note the parallax effect between images and at the same time on the left side background colour change and header fade in and out, and after 3 slides scroll is unpinned and back to "normal" thank you
  25. Hello, I am pretty new to GSAP and trying to achieve an effect that might not be possible. I am trying to get a parallax slider to pin when you start scrolling so the parallax layers will show. I would like it so that the images show up as in the .gif and start to display when you scroll. After that you continue to the normal content. I have searched all over the internet but I cannot find a good example or a piece of code that achieves this. ScrollMagic is supposed to be able to handle this but every time I try to apply it the parallax slid
×