Design comparison
Solution retrospective
Hi ! i've done this project with a massive error, the HTML placement of the "share_bubble" . I will fix this after your feedback, but, before fixing, i have 2 questions, maybe basic, but, anyway :
-
How to create an arrow for the share bubble ? I've seen many ways to create a custom arrow, but, in this project, what is the better solution ? I mean, the more optimized ?
-
I'm a very beginner at CSS and JS, and creating the JS feature was really easy, but I don't know how to create and manage transitions/animatiosn on CSS, specifically in this case. I wanted to add a 1s transition to "share_bubble" when appearing after being clicked.
I hope you can help me on this.
thx you so much in advance, have a nice day !
Community feedback
- @Robert-RynardPosted almost 3 years ago
That's ok everyone has to start somewhere! I found this cool article about one way to add the triangle https://css-tricks.com/snippets/css/css-triangle/ using the ::after pseudo element which is what I used in my solution. As for animations I would recommend shorter than 1s in this instance as that would feel like a life time on the site. One of the ways you can go about animating the share bubble is by using transform: scale(); changing the scale from 0 to 1 and adding transition: transform 200ms ease-in; I would also recommend looking over your mobile version and seeing if you can get it closer to the design and the positioning of the share pop-up. I have some transitions in my solution so feel free to have a look and maybe it will help and good luck with your learning journey!
Marked as helpful0
Please log in to post a comment
Log in with GitHub
Join our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord