Hasn’t been solved, it seems so simple but I’m not sure what I’m doing wrong. Please help if you can!
Hello, I created an interactive popping bubble element on my site and it plays perfectly when previewing the animation sequence in designer, but when I publish it on the site the colored ‘popped bubble’ animation disappears completely and doesn’t appear like its supposed to.
It’s supposed to appear right when the ‘about bubble/lottie animation’ disappears so that the pedestal doesn’t move and it looks like the bubble popped.
Please let me know what I am doing wrong if you know how to help and thank you so much!
Your problem is in how you are positioning the elements (orb and bubble pop lottie) and in how you are hiding/showing them.
Right now the pedestal is jumping because when you hide the orb, its height goes away. The lottie animation is not showing because you only have a “Lottie 100%” animation (it needs to start from 0%).
@Lauren_D you might consider setting the wrapper div to relative and give it definite height/width values and then letting your lottie animations be absolute. This removes them from the document layout flow and should solve your jumping pedestal problem. When you are triggering your hide/show in the animations pane, be sure to hide and show the lottie elements (not the div wrapper)
Thanks so much for your help! I followed your steps and set the ‘popped bubble’ to 0%. I also couldn’t change the positions of the animations because they stack on top of each other and only look like this in static.
However, the ‘popped bubble’ is not displayed and showing on the published site. This is odd because it shows and plays properly in the design editor of webflow, pictured below:
It directs to a page not found because I have not published the about me page yet. As you can see though there is no ‘popped bubble’ animation like it shows on the designer/editor page.
@Lauren_D It’s loading onto the page and shifting from display none to display block… which is good.
But I’m not sure why it’s not showing on the published site. Maybe since it’s in the middle of performing a redirect to the next link, not sure though. I’ll look into it a bit later when I’m back at the office.
Hopefully you can click around through that to get a sense of what you need to do to make it work.
Note that in preview mode of designer you probably wont see the animation because the page transition happens too quickly. I added some custom code to delay the page transition so the animation can play out, but that will only take effect on the published site.
I have a 3-second delay custom code already on the project that works for all the ‘Lottie Animation’ elements (the bubble and phone)
The demo works great on my laptop but in the read-only link like you said there’s an immediate transition so I can’t see it on there. So if I’m understanding this correctly, all you did was add that code to delay it and it created the proper animation that I see in the demo?
No, I think you still have some work to do with how you are arranging the layout of your items and may need to tweak the animation to get the right look (mine only goes to 50% of the lottie animation).
If you are delaying all lottie animation by 3 seconds, that probably explains why you aren’t seeing the bubble before the page switches over.
The code I provided provides a 2 second delay anytime the user clicks a link block with the class ‘pagetransition’ applied.
Lastly, it is expected that the delay does not occur when you use preview mode on the read-only link. Custom code doesn’t run in preview mode, only published site.
I see, I replaced the code with your code and changed it to 50%, as well as hid the 'popped bubble ’ and placed them in a layout as you did and it works to delay the page transition, except the popped bubble still doesn’t show like the previous code… I’m not sure what I am doing wrong or if I am still missing a step that you did to make it work.
Heres the current read-only link. Thank you for your help!
It’s so odd because when I have them visible and stacked on top of one another (bubble and popping animation) they work in sequence (bubble clicked then popping animation is triggered.)
But when I hide the popping animation (setting hidden as the initial state) it doesn’t re-appear in sequence anymore or at all. It’s as though when I hide it, it then doesn’t follow the animation sequence only when it’s visible the entire time, it does, but I need it to be hidden then appear after the bubble is clicked.
