Jump to content

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

akapowl last won the day on February 28

akapowl had the most liked content!


  • Content Count

  • Joined

  • Last visited

  • Days Won


akapowl last won the day on February 28

akapowl had the most liked content!

Community Reputation

1,697 Superhero

About akapowl

  • Rank
    Advanced Member

Profile Information

  • Location

Recent Profile Visitors

1,849 profile views
  1. In reference to this I found the forum archive of css-tricks. https://css-tricks.com/forums/topic/how-to-horizontally-scroll-by-mouse-wheel/ The codepen that the user "Shikkediel" links to shows how to do it with vanilla java-script. It needs a certain setup to work in the first place and since you are likely going to have to use some other element than the body itself as the scroller for that, you will have to set the scroller to that element in your ScrollTrigger to make it work. Note, that this is considered scrolljacking and you might run into problems along the way
  2. Before I address your questions: You forgot to incorporate two essential lines of code for things to work properly at the very end of your demo // each time the window updates, we should refresh ScrollTrigger and then update LocomotiveScroll. ScrollTrigger.addEventListener("refresh", () => locoScroll.update()); // after everything is set up, refresh() ScrollTrigger and update LocomotiveScroll because padding may have been added for pinning, etc. ScrollTrigger.refresh(); And I also added .smoothScroll { overflow: hidden !important; } to your CSS - so the
  3. I don't know if I really understand what it is you are saying there. Real horizontal scrolling would be something like this - and of course as shown here you could also use ScrollTrigger for that. https://codepen.io/akapowl/pen/ff94134f1a6a1780221eb3c1768eba35 If you wanted it to work so it scrolls horizontally when the mouse wheel is being rolled up or down, I guess you'd have to hook into the wheel event and write some logic for that yourself - maybe something like this css-tricks article shows - although it uses jquery and is a bit dated. But I'm pretty
  4. Hey @ilike.idontlike If like in your example, you don't set a specific width to each of your elements, you'd have to make sure that all the images which are neccessary for the calculations are loaded before you set up your ScrollTrigger. That could be as simple as hooking into the window's load event. https://codepen.io/akapowl/pen/72253f87c660bf6c920728ba12ec34d1 Edit: I didn't do this the pen above, but you will likely have to also incorporate the margins you have set into the calculations for the horizontal scroll to make it work 100% correct.
  5. Hey @Timobee - welcome to the forums. Looks like you've already got everything correct in your demo for the ScrollerProxy. To get it working with Locomotive scroll in the first place though, you'd have to set the scroller on your ScrollTrigger. Then simply just add horizontal: true to it and you should be good to go. You can now even use left and right as values for your start and end. These are the additions/changes I made on your ScrollTrigger - the changes on start and end (and the added toggleActions) are just for demonstration purposes; you ca
  6. Hey @jatinsangwan Before diving into scrollbased animations right away, a great point to get started with GSAP is this article in the learning center When you've got a good grasp of how the basics work, you could dive deeper into ScrollTrigger https://greensock.com/docs/v3/Plugins/ScrollTrigger ... and maybe take a look on how one of the various examples for horizontal scrolling on the ScrollTrigger demos page work, for example this one here https://codepen.io/GreenSock/pen/YzygYvM For w
  7. Hey @pietM That's actually hard to tell without seeing the full code, as Zach already mentioned - in your codepen demo you don't have any killing/destroying going on. Have you tried a method similar to what is described in this thread (which is for barba - but I guess the core concept would apply for swup, too) ? I don't think a simple re-initiation as you described in your original post will be enough, you will also have to make sure to kill the old ScrollTriggers - and it would probably also be best to destroy the old locomotive-scroll instance before c
  8. Hey @Red Bag Since you are not using native horizontal scrolling, but 'faking' the horizontal scroll with a tween on vertical scrolling, you'd have to do some calculations yourself for detecting when the section you want to adress, actually comes into viewport. This demo from the demo page https://codepen.io/GreenSock/pen/ZEpNLZa as well as these threads might be helpful for you to understand how that could be achieved The second thread linked contains a lengthy explanation on when and why you'd h
  9. Hey @joshuawalker - welcome to the forums. The sparks-animation on that site is most certainly based on WebGL - I think they make use of three.js. You can certainly use GSAP to animate those particles through the 3D space, but building something like that is not what GSAP is built for in the first place. Probably some of the examples for particles could be helpful to get you started https://threejs.org/examples/?q=particles#webgl_points_sprites Also there are some other quite useful ressources for something like that https://aerotwist.com/tuto
  10. Hey @rubenmeines The kick you are experiencing can be related to a variety of things, depending on how you have things set up. Since what that 'kick' is, can also be interpreted in different ways, it would probably be best if you created a minimal demo of your issue. Most likely it is related to how browsers handle the scrolling on a different thread and that makes it hard to sync things up. If tailbreezy's suggestion with anticipatePin doesn't work for you, maybe these threads can be helpful
  11. Hey @goellner It looks like snapTo: 1 / (slides.length + 1) works like you intend. https://codepen.io/akapowl/pen/6ff95c629e753916d4a913da8eb7cbdc Is that better? Edit: Or set the start to 'top top' (which by default is 'top bottom' when the ScrollTrigger is not pinning) and use the slides.length like @tailbreezy suggested.
  12. Because as Zach and I both already pointed out, all of your items are positioned fixed - there is no spacing that sets them apart. If you simply just set the start of each scrollTrigger to something like 'top 20px' they will all start animating at the same time because that trigger-start-point will be reached at the same position for each element. That's why you have to create some sort of offset - either like I tried to explain and do in my pen or as Zach suggested by positioning your items in a diferent way than fixed.
  13. In addition to what Zach said: When you incorporate a ScrollTrigger as an object in a tween or a timeline it is supposed to be scrollTrigger:{...} in camelCase. Also toggleActions and scrub won't work alongside each other - when you include both, the scrub will take control of the tween/timeline and the toggleActions becomes redundant.
  14. Although it won't fix your issue, using tailbreezy's first code example above is a good idea. It's a little easier to read than what you have. In that same vein; using a proper formatting (this espacially with regard to your CSS) helps yourself and others wrap your head around what's going on more easily. For the issue - I would probably handle it this way: 1) Instead of a padding-bottom: 100vw I would space the sections by using a margin-bottom: 100vh. 2) Create two seperate ScrollTriggers for each of your sections - one that handles the animation with an e
  15. There is no single one-solution-fits-all-needs approach - again, it depends on how exactly you want things to happen. If you want something similar to the video you posted, you would probably first have to set all but the first box (the red one) to invisible. Based on my approach what you'd want to do instead of using a single tween, is use a timeline and add a second tween for the nextElement to fade in after the first has animated out. Of course you'd have to check for the next element to animate beforehand. If you do it like that though, you will likely run into