Jump to content
GreenSock

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

jenda

Members
  • Posts

    11
  • Joined

  • Last visited

Recent Profile Visitors

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

jenda's Achievements

  1. @OSUblake, thank you for your response. At the moment, I set for the trigger end '3000px', but I would like to have this value dynamical because my users will have different number of items there. So I need to calculate the height of the trigger dynamically. Hopefully I express it clearly. Would it be possible to use something like this to get the height of all images (or something else with a clear height) there and use this value as trigger end? let contents = document.querySelectorAll('.image-container') let contentHeight = gsap.getProperty(contents, "height"); Here my .js gsap.registerPlugin(ScrollTrigger); let tl = gsap.timeline({ scrollTrigger: { trigger: ".layer-story-pinned-content", scrub: true, pin: true, start: "top 30", end: '3000px', //endTrigger: '.layer-story-pinned-content', markers: true } }); tl.from( ".layer-story-content-wrapper", { y: 20, autoAlpha: 0, stagger: 0.5 }, 0 ).to( ".layer-story-content-wrapper", { y: 0, autoAlpha: 0, stagger: 0.5 }, 0.4 ); tl.from( ".layer-story-image", { y: 0, autoAlpha: 0, stagger: 0.5 }, 0 ).to( ".layer-story-image", { y: 0, autoAlpha: 1, stagger: 0.5 }, 0.4 ); https://codepen.io/jankout/pen/ZEJOypz
  2. Hello @Cassie, thank you very much for your help. What if I would like to have it more dynamicale it means that the end of the animation will be (re)calculated by the ScrollTrigger according to the content height? At the moment, we set the heigt of the main wrapper (layer-story-box) manually because the items we animate are positioned absolutelly. But in my case it must be (re)calculated dynamically because there will be different number of items. Is it obligade to set the position to absolute? Would it be possible to (re)calculate the content height and set it to the ScrollTrigger? I guess I could use something like this? let contents = document.querySelectorAll('.image-container') let contentHeight = gsap.getProperty(contents, "height");
  3. @akapowl yes, you are right. I ment .contents +, of course Thank you.
  4. Hello @akapowl, thank you very much for your quick and helpful response. I'm just curious how I can tell to the .main-number to finish the pinning effect at the end of .contents or at the begining of the follow HTML element in DOM - let's say something very common like .contents + *. At the moment you use as endTrigger section.two. Is it possible to use it I would like to (.contents + *)? I've already tried it but it didn't work.
  5. Hello Cassie, thank you very much for your helpful response. In general I would like to pinn the first year and just to pinn the others as soon they reach the same level of the main year. The pinned effect of the main year should end as soon as the container with the contents comes to its scrolled end. What if I would like to fade out each number after the pinned effect finishes? Should I use onLeave() or something else? Is it possible to use autoAlpha, rotate etc. there or isn’t possible and I need to define a timeline?
  6. Hello, I'm quite new here and I would like to pin and show every year number as soon as the container with the year and text appears next to the main number which is already pinned. Both effects shall end at the scrolled bottom of each content. I've already used the method forEach bute it seems that I didn't use it propertly. Does anybody know how I can solve this issue?
  7. The first issue: I need to force the first pinned container (layer-story-box) to scroll untill the whole texts appear and desappear. The second issue: I would like to show the texts and news images simultaneously. But the texts are overe the images. I would like to puzzle the whole image and add the texts to the news image pieces. This is my goal. I updated the demo. Is it clear more now?
  8. Hello, I'm trying to do something similer, but unfortunately not all the pinned content appears - at the moment it ends with the thrid section but there are five. Moreover, I would like to show each image_container (grey section) simultaneously to the apperied pinned text (.layer-story-content-wrapper) - my suggestion would be to do it with adding a z-index style to wished image. Does anybody know how I could do it? https://codepen.io/jankout/pen/vYZqjaw
  9. Hello, I'm trying to have a section with horizontally scrolled elements by using ScrollTrigger. My inspiration comes from this forum thread. The container is hidden first and appears when you click on one of the links. There is a div (side-story-inside) which contains 3 or more divs which I would like to scroll horizontally so you could see all the content horizontally next to each other. I'm quite a new GSAP user that's why I'm asking to get help here. I would be very tahnkful for any help.
  10. I used the code above and my question is GSAP-related. If you look at my GSAP code you will see what I'm using there. I guess I need to do some small changes. But, unfortunately, I'm quite new GSAP user and I cannot see the problem. I would appriciente to get any help.
  11. Hello, I'm trying to have a section with horizontally scrolled elements - it is usualy hidden and you can open it with a click on a link bellow. It should look like having the conent horizontally out of the page. By scrolling, you should see all the content. https://codepen.io/jankout/pen/BaZNNQw
×