Search the Community
Showing results for 'buildinamsterdam.com' in content posted in GSAP.
Found 8 results
-
Hey everyone, I've been working on a site that shows a side panel which vertical scrolls items automatically (and smoothly). Inspired by this example: https://www.buildinamsterdam.com/ See the codepen attached for my working example. It's a simplified version of what I implemented in the site. I added a div which Scrolltrigger watches and based on that, it'll set the timeline speed. Also, it watches for scrolling, pausing the animation and starting it again It's working... but not 100% to my taste, it just feels a bit off. You can scroll faster than the animation. So if you scroll vigorously, it's not really synced with the animation anymore. Also, you can't start with scrolling up as your first action. Do you have any pointers to improve this? Does this solution make sense at all or is there a way better solution that I didn't think of?
-
What tool I can use to create something like this http://www.buildinamsterdam.com? I checked the website and its made in Green Sock. The slide is easy to create but the deep linking is hard, it also using Wordpress.
-
Hey @mvaneijgen I followed your reccomendation and created a page based on your example with 4 columns. However the https://www.buildinamsterdam.com/cases example has the second column scrolling faster than the rest. This creates a nicer effect as one column scrolls faster. Do you have any simple tips on how to achieve this in the example you provided?
-
Hello dear GSAPers, I saw an effect on this website that I would like to recreate. When clicking on one of the project teasers on the home page, it expands to full screen size no matter where the teaser was previously on the screen: https://www.buildinamsterdam.com/cases Is this possible with GSAP? Thanks for your help and a good start to the new week....Johannes
-
Well, I'm not sure where that week went! I've been fighting with scrollTo, trying to get my page acting in an expected fashion, and I'm kind-of there - I think. It needs a little more finesse around the final positioning of the sections - so the three sections shown are always centred - but compared to where i have been this week, it's a step forward at least. I've been out of the coding game for a while and it's taking more time than i had originally hoped ? BUT, I'm still not sure about rocking two timelines and then hacking them so they (almost) keep up with each other, so the question is: is it valid to have two timelines controlling one container -- or is there a more efficient way of controlling it ? Here's an updated codepen using scrollTrigger expanded from my original posts: https://codepen.io/darkgr33n/pen/poyVwLK As part of the journey, I've tried to look at other possible methods of achieving what I'm looking for. I spent a fair bit of time with something based on @PointC's very helpful Fullscreen sliders horizontal and vertical. It only had one timeline, so I adapted it to the three-section design. I like that it uses the wheel event as I find it easier to visualise whats going on, however I'm not experienced enough to be able to code it so that, when the wheel is used, it moves smoothly across the width of the container -- rather than snapping one section at a time. It also has draggable which is nice and smooth and also works on touch devices, which the scrollTrigger one above doesn't yet do. I need to read about MatchMedia. But anyway, here's a codepen using 'wheel' with buttons and drag: https://codepen.io/darkgr33n/pen/WNwJEOL Before I embark on trying to work out how to get my scrollTrigger version working on mobile/tablet, I just wanted to make sure that I'm not barking up the completely wrong tree!? For a bit more context, in case there's a whole other way, I'm trying to emulate the quite fantastic buildinamsterdam.com, albeit rather crudely. Cheers!
-
Hi! I have an animation of a column that takes the full viewport height and i'm using scrollTo to make that column scroll up. But the issue i'm having is that i can't scroll with my mouse. It blinks/flickers. I Understand that it's because one scroll interacts with the other. I just want to be able to scroll during the animation. Like in this page: https://www.buildinamsterdam.com/
-
I think this has been asked before, check out this post Also if I search that url I get several topics if discussing several elements of the site. Hope it helps and happy tweening! https://gsap.com/community/search/?&q=buildinamsterdam.com&type=forums_topic&quick=1&nodes=11&search_and_or=and&sortby=relevancy
-
Hi everyone, I’m discovering GreenSock animation framework, seems pretty powerful. But I’m struggling reproducing the following text animation (that maybe some of you will find basic?) : https://www.buildinamsterdam.com (by animation, I'm speaking about the very first text animation on black screen where text appears from the bottom by words, then disappears on the left by chars, then black background disappears by collapsing into 3 vertical bands) Before asking for your help, I've done my research on the forum and I discovered the need to use SplitText add-on. I've set up a first approach on this pen : For the exit animation, how do I handle the "overflow hidden" wrapping of all chars to make them disappear when they move left ? How should I start for the 3 vertical bands reveal animation ? Thanks for your kind help, very much appreciated
