Okay, so it’s instructions for Motion.page, but they’re both using GSAP, right?
I have set up all the blocks properly I think. Everything seems to be working, but it’s not working properly. If I use just pixel values, it moves horizontally as an animation, but I’m looking for it to scroll along as the user scrolls. Here’s a little video of what I’m experiencing:
Anyone in this “How to” section good enough with GSAP to help me figure this one out?
Thanks!
Hi 
I’m on the way and not watching your video. But it seems that „Use Scrub“ will solve your problem. Also you need to pin your section with „Use Pin“. Just leave the pin selector empty. It will be set just to true then.
Will watch your video later, if that not helps 
Hi @Daniele ! Thanks so much for the reply!
So, I set it to scrub, and now it’s animating on the scroll! We’re half-way there!
But still the Animation Object - {x: -200%} is resulting in no animation. I want to scroll through 3 different sections a 100vh. It only animates when there’s no “%” symbol in there - a pixel value. I need it to scroll past all 3 sections.
Also, as I’m scrolling, it continues on down, but I need it to stick all of the sections at 100vh, scroll along to the right and then scroll on down to section 4 vertically after it has passed the 3rd colored section.
Here’s the site: https://dev.intcultcom.com/home/
FYI, currently it’s set to {x: -2000} so that the animation happens. Hopefully I can change that last zero to a % symbol and have it work soon.
And now I watched this video:
I learned that I should set “Toggle Actions” to “restart none none none” and now it will go backwards. But the bounce is really heavy. I’ll have to figure out how to smooth it out.
And the “Pin” that I’m using is on the scroll bar on the top of it:
[image]
FYI, I’m hoping that this post serves people who search “horizontal scroll” in the forum in the future. If this helped you, throw a like or a comment on it. Tell us if you’re still having problems. Future me help you in the future after I understand this. LOL.
Hi,
{x: -200%} is not a valid javascript object. For non numeric values, you need to wrap your value with quotes.
So your object should be: {x: "-200%"}. Or just use the gsap key “xPercent”: {xPercent: -200}. This will do the same.
Also I notify that you don’t seem to use Scrub for your animation. When using scrub and PIN, you should adjust the “Animation End” value on the Scroll Trigger options to adjust the speed of your animation. “+=500” will run it faster than “+=5000”.
PS: For “Scrub” you don’t need to setup Toggle Actions.
Hi @Daniele,
This is tremendous support! Thanks so much.
I’m ALMOST there, but you’ll see that “Design with Cracka” adds a “transform-origin: left” at this point:
How would I add that?
I tried just adding it in the “Animation Object [From]” along “scaleX: 0” with but just stopped the progress bar animation entirely.
And if you have any, tips on mobile optimization here would be great! I’m realizing that it’s not doing the same thing on mobile at all.
What just about transformOrigin: "left" ?
Yup! That did it. I’m really happy with how it’s displaying now.
You’ve gone above and beyond “support” with your coaching & guidance on GSAP @Daniele . Thanks so much!
Great! Looks really fresh by the way 
It’s getting there - thanks to your help and some incredible tools!
How cool, thanks a ton to @Revere and @Daniele – that is something I also need and wanted to be able to. I love Bricksforge for the skills, the support, the speed of development and the forum. I am a huge fan. 
Give it a go and let me know if you need any help in the settings! I can share a vid about where I ended up.
Very cool, thank you for the nice offer! I would also love to see your final video.
Hi all, can someone do a small tutorial on this? that would be awesome. still not great with JS and GSAP to know what to use where and when
I’m still not happy with my results yet, but if and when I am, I’ll try to put up a video with my final settings.
Hi @Revere did you get any luck? even a short video of where you are and how you got there would be super helpful/useful to get started, would have no clue where to start with this!
@Daniele would you consider doing a tutorial for a horizontal scroll section (ie section locks when scrolling down on the page to that section, then it scrolls horizontally until the end then the site continues scrolling down) ?
i have NO idea how to even start that.
After releasing 0.9.7, I plan to create 1-2 video tutorials. I keep that in mind 
Sorry, I’ve gotten loaded down with work and that’s one I just haven’t been able to get to. I haven’t gotten it where I need it to be to the point where I could make a video.
Hopefully @Daniele will be making us a horizontal scroll video soon, huh? 