Jump to content
Search Community

Search the Community

Showing results for tags 'bootstrap'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • GreenSock Forums
    • GSAP
    • Banner Animation
    • Jobs & Freelance
  • Flash / ActionScript Archive
    • GSAP (Flash)
    • Loading (Flash)
    • TransformManager (Flash)

Product Groups

  • Club GreenSock
  • TransformManager
  • Supercharge

Categories

There are no results to display.


Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


Personal Website


Twitter


CodePen


Company Website


Location


Interests

Found 9 results

  1. Hello there, i have a bootstrap 5 dropdown with some items. I created a simple opacity & x translate stagger animation. When you click the dropdown and wait until the animation ends and then click the other dropdown all is fine, until you click fast between these dropdowns the animation breaks and gets bugged. Is there a smarter/better way to reset these animation? Thanks!
  2. I'm coming to this having started from that support question. Many years ago I'd built a site based on this very old tutorial. Then, a few months ago I got some assistance on this in order to create a simple horizontal scroll, which worked pretty nicely. Today I've started to try and combine the scripts from support question responses, and the horizontal scroll pen, in the one I've included here (somehow I don't think that sentence makes any sense except in my own head) in order to emulate the behavior from that old tutorial. In any case, I'm not sure why it's not really working the way I think it should. I'm still fairly new to gsap, so I apologize in advance for not seeing things that should probably be obvious.
  3. Hi, Having a standard bootstrap progress bar — is it possible to actually tween it's value. i see over complicated things online, but not a simple progress bar without alternations. Hence the question. <div class="progress"> <div class="progress-bar active" role="progressbar" aria-valuenow="0" aria-valuemin="90" aria-valuemax="100" style="width: 90%"> <span class="sr-only">90% </span> </div> </div> So how would I simply animate it's value? Any tip is greatly appreciated. My apologies if this is already covered, however I couldn't find the answer for this simple example. Thank you for your help.
  4. Hi there, I'm trying to achieve some quite simple animations for my bootstrap carousel slides, but I'm not able to get them rendered at the right moment. What I want to do, is to animate the slides, which are inside its captions, for each slider image when the next image is sliding/ fading into view. Right now, the carousel is set to "pause", so that the slide effect is managed via the carousel indicators or controls. I got to work the animations for the first carousel image with a simple timeline, like so: var tl = new TimelineLite(); tl.from(".tlt", 0.5, { left: 200, autoAlpha: 0 }, "-=0.25") .from(".tlt2", 0.5, { right: 200, autoAlpha: 0 }) .to("hr", 0.5, { width: 800 }) .from(".fa-angle-double-down", 2.5, { top: 0, autoAlpha: 0, ease: Elastic.easeOut }) where .tlt, .tlt2 etc are the headings and sub heaings to animate. The problem arises, when I try to achieve animating the elements of the next slides, which are fading in by manually changing to the next slider image. I don't know how to animate them for the moment the next slider image comes into view. If I continue with the same timeline, the effects already happened before the next image was loaded. So I tried to create a new timeline, but it's the same problem. I've heard that there is the possibility to add a Label, but only could change the animation delayed in time, not when the new slide comes into view. So, finally I resort to a little, somewhat anarchical trick with an "onClick" function for each indicator. Like so: <li onclick="myFunction2()" data-target="#carousel-example-generic" data-slide-to="1"></li> and: function myFunction2() { var tl2 = new TimelineLite(); tl2.from("#it-h4", 0.5, { left:200, autoAlpha:0, delay:0.8 }) .from("#it-p", 0.5, { right: 200, autoAlpha: 0 }); } Sure, this is not the finest solution and it only works because of the carousel indicators. So what if I want to set the carousel to fading automatically, setting an interval? Does GSAP have any solution for this issue? Couldn't find any related post. Best regards, Pete
  5. I've been building a website with Bootstrap3, and I decided I wanted to tween some divs to break up one of the pages. I tried the following to tween the display of the divs, but nothing seems to work. I also tried using .invisible (see below) and tweening visibility, but that did not work either. Bootstrap classes .hidden { display: none !important; } .invisible { visibility: hidden; }
  6. 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!
  7. Hi again. Getting my feet wet with Bootstrap v.3.2.0. I set up a responsive web page with LESS and then wanted to incorporate some animation using GSAP, but no matter what I've tried, I've seen no animation or any evidence that GSAP functions inside a Bootstrap layout. Did I miss something? Is it the development environment? Did I not load the various CDNs or styles in the proper order? Revised Codepen: http://codepen.io/garyhorsman/pen/gJmft
  8. Hi, I'm trying to find a way to dynamically resize elements that are placed in a responsive bootstrap grid system without the resized element 'pushing' other elements while being resized. Such a grid is simply a set of DIVs which dynamically relocate and resize depending on the size of the viewport, e.g.: example. The main point here is that for the responsive bootstrap grid to work properly the elements' positioning should be set to 'absolute'; however, if I do not set the element's position as 'absolute', when I resize one element, all of it's following DOM siblings are automatically moved. This can be seen as the right thing to happen and as the natural behavior of non-absolute elements, but it leads to a situation where dynamic resizing of elements in a responsive bootstrap grid system affects elements that should remain unaffected. I was wondering if there is a possibility that when one element resizes all other elements, which are positioned as 'relative', will automatically relocate their position so that they remain in the same location as before the resize? In the linked codepen, perhaps it is possible for the red box to resize without moving the blue box downwards when both of them are positioned as 'relative'? This possibility seems necessary for dynamic resizing to work properly when elements need to be positioned in a responsive layout. I will be happy to hear of other possibilities for creating a responsive layout with dynamically resized elements. Thanks very much ! Elior
  9. Ok I am using bootstrap 3, and the modal feature for my portfolio. I have it set up fine and everything works, but when I add my smooth scrolling javascript the mouse wheels scrolls in the background when you have the modal opened. I used this tutorial. Which helped me get smooth scrolling working with TweenMax and ScrollToPlugin. Here is my js for the smooth scrolling: $(function(){ var $window = $(window); var scrollTime = 1.2; var scrollDistance = 170; $window.on("mousewheel DOMMouseScroll", function(event){ event.preventDefault(); var delta = event.originalEvent.wheelDelta/120 || -event.originalEvent.detail/3; var scrollTop = $window.scrollTop(); var finalScroll = scrollTop - parseInt(delta*scrollDistance); TweenMax.to($window, scrollTime, { scrollTo : { y: finalScroll, autoKill:true }, ease: Power1.easeOut, overwrite: 5 }); }); }); You can see my site without the above javascript here: Correct modal scrolling With the above javascript: Error modal scrolling jsfiddle, for some reason the remote content does not display in the modal (on localhost as well) so you cant see it scroll, but you can play with the js here. I attempted to make a jsfiddle but the way I am displaying the contents in the modal doesn't work in jsfiddle for some reason (this was mentioned after I did some research) anyway just scroll to the 3rd section (portfolio) and click an image to see what I am talking about. My modal code is just the stock bootstrap moal and I also tried this with bootbox.js and the same issue happened, so I don't think that is the issue. I have been trying to figure this out for a week now with no success if someone could take a look would be greatly appreciated.
×
×
  • Create New...