Jump to content
Search Community

GSAP with Bootstrap Divs

KingOfTheNerds
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

KingOfTheNerds
Posted

I'm relatively new to both Bootstrap and GSAP, but am trying to work through the issues that I'm encountering, so I hope that you can help me get this going: I'm trying to animate a vertical timeline that I built in bootstrap, so that the text boxes and images fly in from the sides. The issue that I am specifically encountering is that I want to use bootstrap's push & pull features in order to make the timeline look correct on mobile and desktop apps. (I always want the image to show first on mobile).

 

In my CodePen, you can see that the animation works correctly, however then the HTML is no longer responsive. If you remove the tween, then it's appropriately responsive, however the animation obviously does not work. 

 

I think that the issue is caused by the order in which the GSAP & Bootstrap CSS is applied, but I'm not totally sure. Is there any way to solve this problem? 

 

Thank you very much for any help that you can offer!

See the Pen MYEyea by anon (@anon) on CodePen.

Posted

Hi and welcome to the GreenSock forums

 

Does this work for you? http://codepen.io/GreenSock/pen/jEGypa

 

The issue I believe is that the tween set the left inline style on the element. Using clearProps:"left" makes it so that the inline style is removed after the tween finishes. Resizing the window down to mobile-width shows both images.

  • Like 2

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...