I had added this onto my home page just fine, but when duplicating it to other pages, it doesn't work and is just a stagnant white dot- how can i fix this?
ive recently done a similar effect, with blur applied to shapes and animating it when scrolled into view. It's worth noting it works pretty well on Safari and Arc, but on Chrome it's EXTREMELY laggy. it would be good to know if anyone else has experienced it?
I would've never guessed that an infinite marquee could be so difficult. Getting it responsive was the difficult part. I saw both of your videos and chose GSAP. I'm a big fan and I most definitely will have some of their CDNs loaded. Thank you very much for your great work! 😃
Thank you so much for walking us through this. Have you ran into issues with hover animations not working. In preview mode it works but once it's in the target div on the live site the animation doesn't work anymore.
yea that's probably because CMS nest replaces items after page load, and after Webflow JS runs. To fix it you'll need to leverage the Finsweet CMS Nest API to reinitialize Webflow IX2 after CMS Nest finishes loading. finsweet.com/attributes/api I use the CMS Filter API in this Patreon video to make a Macy.js masonry grid work with CMS Filter. Super similar concept: www.patreon.com/posts/horizontal-grid-88560236?Link&
Framer was so much easier to work with. And cheaper cost-wise. I also figured out it was less stressful to actually just "hand code" stuff with regular old html/CSS. And have since ditched any drag/drop WYSIWYG editors.
bro you are the best please keep going i ve been searching about this for a long time i tried gsap with complex animation and many other solution but i couldn't believe this is easy
Awesome video. Thank you. I love Framer how easy it is to work with design wise and their ticker and carousel component that I use a lot. Webflow just feels clunky and "old", but also more flexible. I hate having to choose. :)
haha yea for me the major factor is that the client I want to work with (enterprise) are on Webflow (usually). Framer still a very cool tool. Intrigued by the ticker component you mentioned - going to look in to that. We've got big plans to bring a better carousel experience to Webflow at Finsweet!
Thanks Farhan- I really appreciate your nice comments. Just 2 weeks ago I had someone tell me that it took them FOREVER to unravel my code from Webflow, but it was for a different video. Code is code but sometimes I do have to do goofy little workaround for Webflow. I'll try to keep the rest of the internet in mind! I'd love to start adding codepen examples too just need to find the time!
Having issues with my cloned version working in Google Chrome on the iPhone. It appears to load everything zoomed out (as if you took the entire page and tried to fit it in the phone screen). Have you had this before or know what could be happening? Happy to attach screenshots or links.
@@webbaethanks. To be clear, this is my tweaked site using your initial configuration in Webflow. I'm fairly certain my adaptation to your "bones" is where the problem lies, but I'll hit you up through discord. Thanks!
Thanks for the great tutorial. It's a pity that you can't use this due to performance issues on Safari... In general Safari has problems with gradients and blurs in combination with css transitions & animations.
Hi Web Bae, thanks a lot for the tutorial. This gallery built with GSAP and ScrollTrigger looks awesome. I just tried out the demo on Safari browser (Mac) and it doesn't seem to work. Any idea? Thanks again.
@@webbae Hi, I'm experiencing the issue on my MacBook Pro with Safari 15.5 (this is not the last version of the browser). The problem I'm seeing, it always keep displaying the first image while scrolling. Thanks :)
Hi, can you help me? I have pages that pull tags from the cms so for example an article page that has tags "politics" and "religion" - these tags have been put into the article in the cms using a multi-reference field. Then on the actual article page build you can view the tags of the current article through a collection list. Now I want to be able to link those tags to a page that has all the articles filtered with that tag. In other words, I click Politics and it leads me to a page with all other articles that have that tag. I hope I am making sense 😖 - please help if you can
oh so just to be clear - this is different to the video because its like the url generated wouldn't come from one I copy paste because it needs to be responsive if the tags are updated so it almost has to be from the collection list like "current-filter" or something like that.
You should be able to do this natively in Webflow with the filter setting right? On the template page for your categories used as multi ref field, add a collection list of “articles” and set a filter for only articles with tag equal to current category. In your tags link to that current tag.
@@webbae the issue i have is when i preview the website from the home page and navigate to the page where the modal was created it doesnt seem to work. but when i preview from the page where i created the modal it functions correctly
Absolutely agree with you, Keegan! I love Webflow, and it is undeniably the best overall tool on the market. I find it kinda funny that even though Webflow claims that you don’t need to write code in their headline, they still use a lot of custom code on their homepage, lol.
lol yes at some point I'm assuming they must have deliberating chosen a very specific brand identify (did you read their blog article on motion design systems?) that required it.
Dear Web Bae, I have a related issue: I tried to link a blog-post-component inside a blog-post CMS list to the blog-post template site. Since components can not be linked to CMS template pages, i guess custom attributes could be a solution. Any idea for that? Thanks a lot in advance!!
Awesome video as always WebBae, very useful, thank you so much. Just a minor thing, the cloneable version does not include the forwards parameter on the loader animation. Just wanted to let you know that.
thank you Pablo. Weird how sometimes webflow doesn't publish my updates to the cloneable. I unpublished and republished so hopefully it's updated on your end!
Check out this cloneable by Khrystyna Liubynska which uses absolute divs with linear gradients. You might also be able to use CSS :before and/or :after pseudo elements to do it. webflow.grsm.io/cloneable-is-bae?sub1=logo-marquee-dual
my initial recording I misspelled it to "papper pattern" 😆 but had to throw out that recording because of course I forgot to include the mic in my inputs.
Hi, any idea why at the end of the second marquee-content the animation "jumps" to the start position? It's not a smooth loop. Both marquee contents are the same. Thanks for the help!
it could be a number of things... timing, widths of inner elements, some CSS properties... the comments have a lot of troubleshooting that might help. otherwise feel free to post in Discord and I can try to help you out.
I'm using code sandbox in this tutorial. I usually use VS Code these days. Check out this video: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-1Wpb9TqX_CQ.htmlsi=AhDNIYHIrum6FnFB
you can use ScrollTrigger onEnterBack callback: gsap.com/docs/v3/Plugins/ScrollTrigger/#onEnterBack An example where I use a similar callback, onLeaveBack is here: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-d3V-G0GfovQ.htmlsi=DOpZ_oIKieqn-fpj
