Hi. When I open the cart it only grows as much as the nav bar!
https://preview.webflow.com/preview/thejewelrydesign?utm_medium=preview_link&utm_source=designer&utm_content=thejewelrydesign&preview=424e3a64944e65b691019825b6c66b12&pageId=6029b5a8d21b182f501a3758&itemId=6029b5a8d21b1839651a3952&mode=preview
I found out that the issue is caused by having interaction set on the header. SO, how can I have the slide from top animation on this element while open cart funciton properly?
Whoa that design! 
Checking it out in Preview mode, the cart looks great over here. Are you still experiencing the issue?
Thank you 
The issue was I had set Slide in from top interaction on that element, i just removed it and looks fine now. But now the question is, how do I set the animation without breaking cart again?
Ps. Im having a hard time figuring out how to make the space ring at top bigger on mobile: Shop
if u got any advice brother Id appreciate it
Hi, @JewelryDesign — thanks for the follow-up! One quick way (without getting into the position properties in your layout) can add a transform effect to scale the animation:
Since the animation is scaled from the center, the result stays centered:
Thank you thank you thank you!
Last question (the original bug that has made me open this thread);
I put a slide from top animation on my header to make it like the covid bar (appear from top)
but now the cart doesnt open properly
@JewelryDesign, there’s a lot going on (especially in Interactions with tons of them called New Timed Interaction 
) — would you mind recording a quick video showing what interaction you’ve added and where you’re seeing this problem? 
Here is the video: Loom | Free Screen & Video Recording Software
In short:
First issue: I’ve added slide from top animation to the HEADER so it slides like covid bar. The problem is when I do this, the cart doesnt open up anymore.
Second: I tried to make the lottie animation bigger on mobile by scaling it, but the margin falls outside of the page and when i scroll the page on mobile it goes left and right instead of up and down!
Third: I want to add a lottie animation or video for each product. How can I achieve this? Right now whatever Lottie I add appears on all pages
Thanks, @JewelryDesign for providing the Loom! I was able to reproduce the problem on our end, too. It appears the interaction isn’t mixing well with the cart trigger. I’ll reach out to our team to see if anyone can come up with a workaround, but in the meantime, I recommend removing the interaction from the navbar.
I’ll also ask around about loading different Lottie animations on each page — as I recall, we implemented something like this on Webflow University in 2019, so let me ping @Sara_Lundberg and see if her memory is better than mine! 
Awesome! & thanks in advance! Also would you know how to make those bigger without breaking the padding (2nd question)
Can you try setting the Section’s overflow to hidden?
That worked! Now only need to know about 1 and 3. Thank you so so much. Im almost at the end of making this website and I really appreciate your help.
Any updates? @McGuire @Sara_Lundberg 
Im trying to take the shop online but I cant without puting animation/lottie for each product…
Hey @JewelryDesign,
Thank you for providing the loom and additional information. Yes, we did indeed do something like this when we launched our Webflow + After Effects/Lottie course in 2019!
We created a text field in the CMS which holds a Lottie JSON URL. We uploaded the JSON file to an external server. (Today, this might be possible if you upload it to your Assets and copy the URL from there.)
On the page itself, we added a Lottie element & a text element, then we wrote some custom JavaScript with would pull the text from that JSON text field and inject it into the Lottie element. (I recall us also having to write some custom JavaScript to trigger that swap on page load.)
It was definitely quite a bit of work, and we won’t be able to troubleshoot the custom code on here, but I’m happy to share what we have in case you want to experiment with it, or in case someone else on the forum might have ideas regarding its implementation!
I will attach a screenshot of the designer and add in the custom code used. Remember that the class name has to be the same for the Lottie element in the designer and the custom code class.
Custom code used:
<script>
var lottieDivs = document.querySelectorAll('.lottie-thumbnail');
Array.prototype.slice.call(lottieDivs).forEach(div => {
if (!div.nextElementSibling) return;
var url = div.nextElementSibling.innerHTML; // text url;
if (!url) return
div.setAttribute('data-src', url)
})
window.Webflow.require('lottie').init();
</script>
That’s genious! Thanks alot for sharing it. Ill give it a try and let the forum know. Thanks again.
Not at this stage, sorry @JewelryDesign! I recall there was quite a bit of tweaking to get the effect right, and it required a good amount of back and forth with one of our engineers.
What we can do though is request an additional CMS field type for Lottie animations — that would create a super seamless experience that wouldn’t require code. I know the team is right in the middle of some huge structural work on the platform, so it’s unlikely to get picked up in the short-term, but I’ll make sure to pass along the feature request. (This is something I’d like built into the CMS, too!)
Awesome! Looking forward to seeing these happen. I really appreciate your help. All the best.