Jump to content
GreenSock

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

jimmy-a

Members
  • Content Count

    16
  • Joined

  • Last visited

Everything posted by jimmy-a

  1. Hi there! I'm trying to make this horizontal section to "stick" or "snap" the next or prev slide based on the scroll wheel event, but i'm unable to do so. The main goal is, no matter how long the scroll event lasts, it should simple move/scroll to the next or prev slide. Am taking the wrong approach for that (using scrollTrigger and end())? https://codepen.io/jimmyadaro/pen/jOWaZZV I've tried copying this Codepen since it achieves what i'm looking for, but had no success with that. https://codepen.io/mikeK/pen/eoyrWK?editors=0
  2. I understand, but try to create a Minimal, Reproducible Example. It would be easier for us to help you.
  3. Hi there. Could you please share a Codepen with a simple example/demo of what you have done so far?
  4. Hi there! Sorry for my delayed response, just delivered some projects I replicated the HTML and CSS structure from the iPhone's website. With GSAP I used scrub and a simple from + scrollTrigger. Here's an example in case this is eventually useful to someone. https://codepen.io/jimmyadaro/pen/JjGLRoq
  5. Hi there! That worked like a charm. Had to change a little bit the HTML & CSS, but it's working. https://codepen.io/jimmyadaro/pen/KKVvrBY
  6. Hi! I'm trying to replace the "pinned" images effect when scroll (like, those images "going up"), to a "fade in" effect in the images. So, if you scroll from the page top, the next image should appear with fadeIn, and so on with the other images, until the "scroll zone" (.main-wrapper in the Codepen) ends and then comes the "normal" scroll over the other content. I cannot find the way to do it, so I'll share a previous Codepen.
  7. For some reason I do have some issues with that approach: 1) The elements that are not inside the .side-scrolling-wrapper element seem to not being affected by this new start() value. 2) Idk why or how, but it doesn't work on my real project, which is 99% similar to the Codepen's code (I use different class names but still the same structure). I'll try to debug this from my side but any idea about why this may happen would be great.
  8. Hi Zach! 1) Now using GSAP's animations seems like it doesn't do that anymore, which is great 2) I don't get it, how do I "add their horizontal offset to the start value"? I'll check the intersection observer API tho. 3) Awesome, I tried something like that after publishing this post, but your coding is even better, thanks!
  9. Hello! After the previous issue with the "scroll size" –thanks Zach for assisting me with that!– now I'm dealing with other issue (3 issues, actually). 1) I'm trying to make different elements appear on "fadeInUp" when they're in the viewport, or add that class if the scroll position is >= to the items position, so those items should be already visible if the user scrolls up –e.g. the user has entered the website following a link with a hash/anchor link in it and it takes them to scroll position "Y" instead of "0"–, avoiding play the transition/animation again.
  10. Awesome! Didn't think about that. I divide it by 8 in my real project and works like a charm. Thanks again 🙌
  11. Hello Chris! I'm not a pro using GSAP, your general idea sounds like one that would use the scrollTrigger plugin, but maybe you may resolve that using the CSS property position: sticky – Have you read about that one? It'd be great if you could provide a visual example (e.g. image explaining what should happen in this homepage of yours), maybe even a reference link. A Codepen demo would be awesome.
  12. Hello there! I'm trying to create an horizontal scrollable section inside this mainly-vertical scroll site, which works fine so far, but now I need help to make the slides move easier when scrolling. What I mean is, right now you need to scroll almost the full width size of the current slide in order to go to next or prev slide, but I want to make the slides go/move/snap forth and back with less scrolling time, using either a mouse or a trackpad. I tried different snap values without the desired result. I don't know for sure if the approach made in my Codepen is the rig
  13. Hi @mikel! I know clip-path, how may I use it along GSAP?
  14. Hi there! I want to create an effect like this, which sources should I search for? I'd like to make the effect in both text and images.
  15. Hello Mikel! Thanks for your response! Really useful. I didn't know about autoAlpha, I've seen that being used on TweenMax, didn't know if was compatible with GSAP's core. Thanks again, have a great day
  16. Hi there! I don't usually use GSAP (mainly bc I don't usually need to animate stuff), but I'm trying to make a thing and cannot figure it out, so I thought about posting about it here. The thing is; I have a couple ScrollTrigger created, looping some elements in my DOM. I need to show some information (.main-wrapper__title-wrapper) over the pinned elements, but I need to show the 1st info element in the first three pinned elements, and a 2nd info element in the last two pinned elements. I cannot figure out how to make the items show or hide based on the scr
×