Article preview component

Community feedback

• 

  Jay Khatri•4,230

  @khatri2002Posted 3 months ago

  Hi! The developed solution looks great, and the component is effectively meeting the requirements for both desktop and mobile resolutions!

  Suggestion for a Smooth Transition:

  To ensure a smooth transition when showing the social share icons box, avoid toggling its display property. While using display: none; or display: block; works, it does not support transitions or animations, leading to a stiff appearance.

  Instead, follow this approach:

  1. Initial State (Hidden)

     • Set the box’s initial state using:

       opacity: 0;  
       visibility: hidden;  
       

     • This ensures the box is visually hidden and inaccessible.

  2. Visible State (On Interaction)

     • When showing the box, change its properties to:

       opacity: 1;  
       visibility: visible;  
       

  3. Add Transition

     • To achieve the smooth transition effect, add:

       transition: opacity 0.3s ease, visibility 0.3s ease;
       

     • This ensures the change in opacity and visibility occurs smoothly over time.

  4. Optional Enhancement

     • To make the animation even more dynamic, consider adding:

       transform: translateY(10px); /* Initial state */  
       

       • Combine this with:

         transform: translateY(0); /* Final state */  
         transition: transform 0.3s ease;
         

       • This creates an effect where the box appears to slide up from the bottom.

  Keep experimenting with this approach to perfect the animation and achieve the desired visual effect. These little touches can make a big difference in enhancing the user experience!

  Great job so far! Keep up the amazing work! 🚀

  0

  ---

  

  P

  Aminpatra•350

  @AminpatraPosted 3 months ago

  @khatri2002 can't you just use @starting-style in CSS ?

  0
• 

  alexpeteronoja•280

  @alexpeteronojaPosted 3 months ago

  Nice Work

  0

  ---

  

  P

  Fadya•400

  @MaxCoder-mcPosted 3 months ago

  @alexpeteronoja Thank you alex 💐

  0