Search the Community
Showing results for tags 'div'.
Found 13 results
-
Hello happy coders! I found this particle code on another post and updated it make it work for my purpose... see codepen. Every time you mouse-over the black area, 300 particles (divs) are added and animated. While it looks pretty smooth in Safari & Firefox - it's not smooth at all in Chrome. And I know the processor load is pretty high in all browsers. How can I improve the code to make it run more smoothly with less processor load? Maybe using canvas might be a better way to go here - but I have no experience with canvas at all. Maybe there is something else to improve it?
-
Hello guys! I'm truly new using Draggable product and I'm having a problem that I didn't find any solution on web I want to increase size to my container when the target hits the edge of. Actually, I'm using edgeResistance and it work very well but instead, I need to start a function that verifies the size of container and increase X px to width or height (depends where it hits) There's any option to verify when the target hits the edge and where (x,y)? Thank you
-
Hi! I've just discovered GreenSock yesterday and the whole suite of products and it's kinda awesome. Learning the basics is very simple and even more advanced stuff is pretty accessible. But sadly I'm facing an issue with Draggable. I've noticed that it it's not possible to drag an element out of a scrollable div. The element just keeps scrolling in it's own div, but he can't escape it's own div. To clearify the situation: I'm buidling a scrollable bar at the top of the page (which kan be hidden/shown). That bar contains draggable elements that will be dragged onto an element that is somewhere at the bottom of the page. Is it possble to disable some kind of CSS in the onDragStart to allow exiting the scrollable div or something else? This codepen showcases the issue: http://codepen.io/Mattttt/pen/pvYgER Thanks!
-
Hi everybody, I came across a problem of moving each div of my page with a tween. Looking on this forum i found lot of different solutions, but one works as expected. VIewing the page on mobile, the tween moves the div to the center, but using landscape or laptop seem to move it toward lower right corner. The code i'm using is the following: var t=new TimelineMax() t.to(divId, 0.3, {x: window.innerWidth/2, xPercent: -50, y: window.innerHeight/2, yPercent: -50}) .play() Any idea on what the problem is?
-
Hi all, I'm a beginner with GSAP and I've got a problem with the "staggerFrom" tween. All "move" divs are animated : they are coming together (like one raw) and not one by one. I don't understand why, I don't know where the problem is. Could you help me, please ? Thank you very much. Here is my HTML code : <div class="consigne"><b>Complète les expressions à l’aide des mots suivants :<br><br> <div class="move" id="word1">vol</div> <div class="move" id="word2">nuée</div> <div class="move" id="word3">rangée</div> <div class="move" id="word4">bande</div> <div class="move" id="word5">tas</div> <div class="move" id="word6">pile</div></b> </div> My CSS code : .consigne { font-family: arial; font-size: 1.2em; margin-left: 5%; margin-top: 5%; } .move { color: white; padding-left: 20px; padding-right: 20px; padding-top: 3px; padding-bottom: 3px; border-radius: 5px; display: inline-block; } #word1 { background-color: #99009C; box-shadow: 0 0 1px #99009C; } #word2 { background-color: #51DB00; box-shadow: 0 0 1px #51DB00; } #word3 { background-color: #19B5FF; box-shadow: 0 0 1px #19B5FF; } #word4 { background-color: #FF8F00; box-shadow: 0 0 1px #FF8F00; } #word5 { background-color: #FF1714; box-shadow: 0 0 1px #FF1714; } #word6 { background-color: #FFCB00; box-shadow: 0 0 1px #FFCB00; } And my JS code : TweenMax.staggerFrom(".move", 2, {opacity:0, y:500}), 0.2;
-
Hey All, Simple question I hope can be answered. At the moment when .card is clicked all the divs with the class .card animate. I only want to animate the .card div that is clicked. I've experimented heaps with $(this) selection and I can't get it to work as intended. Any help is much appreciated. Thanks all.
-
Is it possibe to scale a div with TweenMax but I would like to maintain or reset the CSS top and left position? Below are a few failed attempts. It seems TweenMax always scales from the center point. TweenMax.fromTo('#div-name', 2, {scaleX:.5, scaleY:.5}, {css:{top:0, left:0}}); or TweenMax.to('#div-name', 2, {scaleX:.5, scaleY:.5}); $("#div-name").css({ top: '0px', left: '0px' }); The Codepen URL shows the red div scaling but not maintaining the top: 0 and left: 0 desired position.
-
Hey guys, so i have a question about tweening a div with a class, i already know how to tween a div with an ID like this: ------------------------------------------------------------------------------------------------------------------------------ <script> window.onload = function() { var div1 = document.getElementById("div1"); TweenLite.to(div1, 1, {opacity:1.0, delay:1}); } </script> ------------------------------------------------------------------------------------------------------------------------- now, how would i do the same thing to a div class?
-
Hi Thanks in advance for any responses. I am trying to figure out what is the best way to load a large image sequence (300 images representing a 3d movie) and control it using TimelineMax or simply staggerTo. I used to do these things super easy with Loadermax (loading the image list from XML) and tweening it. I have no idea how to do generate this array of images using javascript. Please help. Fernando.
-
Hey I have a website which generates posts and I was wondering if I could use the stagger animation to Tween them from opacity 0 to opacity 1 on page load. The amount of elements differs since the website is dynamic. It is structured as follows. <div id="message-container"> <div class="message1"> <div class="message2"> <div class="message3"> etc... </div> I want to animate the divs with class .message<insert number>. Is there a way to do this by targeting the child elements of the message container and then doing the stagger effect on that?
-
hi.. i'm trying to animate a div expanding and collapsing by animating the css height property with TweenMax TweenMax.from(testDiv, .35, {css:{height:0}, ease:Cubic.easeOut}); this only animates the background of the div it seems.. not the text that's in it. the text is always visible. here's the div <div id="testDiv" style="position: absolute; background-color: rgba(255, 0, 0, .5); width: 320px; height:260px;"> </div> i've tried jQuery slideDown() and this works hiding and revealing both background and text content any ideas? i'd rather use TweenMax for this
-
I'm new to JS/CSS (coming from AS3) -- I wonder if someone could help me figure out the following: I'd like to have tabs at the bottom of a page which, when rolled over (or clicked) slide up. The tabs will contain images of 45px height. I'd like, say, the extended tab to be something like 100px in height. I gather this has something to do with overflow, hidden, auto, etc -- I've seen solutions using jQuery slide, but I'm not sure how to do it with Greensock -- that is, I am well-versed in the GS engines, but putting it all together (CSS, DIVs, overflows, etc) is throwing me. Any help much appreciated!
-
I new to the GSJS and I am trying to tween the opacity of a div that as text in it. I have not been able to get the text to change with any css changes. Here is a sample of my code below. Could anyone tell me what I am doing wrong. Thanks. function init() { var title = document.getElementById("logoTitle"); var logoBar = document.getElementById("logoBar"); var subTitle = document.getElementById("subTitle"); var logoNumber = document.getElementById("logoNumber"); var nav1 = document.getElementById("s1navOne"); var nav2 = document.getElementById("s1navTwo"); var nav3 = document.getElementById("s1navThree"); var nav4 = document.getElementById("s1navFour"); var nav5 = document.getElementById("s1navFive"); var mainInfo = document.getElementById("mainInfo"); var logoTL = new TimelineMax({delay:.4}); logoTL.from(logoBar, .5, {css:{transformOrigin:"bottom", scaleY:"10"}, ease:Sine.easeOut}) logoTL.from(title, .5, {css:{alpha:0, marginLeft:"-50px"}, ease:Back.easeOut}, -.3) logoTL.from(subTitle, .5, {css:{alpha:0, left:"50px"}, ease:Back.easeOut}, -.3) logoTL.from(logoNumber, .5, {css:{alpha:0, marginTop:"20px"}, ease:Back.easeOut}, -.3) logoTL.from(nav1, .5, {css:{alpha:0, marginLeft:"-60px"}, ease:Back.easeOut}, -.3) logoTL.from(nav2, .5, {css:{alpha:0, marginLeft:"-60px"}, ease:Back.easeOut}, -.4) logoTL.from(nav3, .5, {css:{alpha:0, marginLeft:"-60px"}, ease:Back.easeOut}, -.4) logoTL.from(nav4, .5, {css:{alpha:0, marginLeft:"-60px"}, ease:Back.easeOut}, -.4) logoTL.from(nav5, .5, {css:{alpha:0, marginLeft:"-60px"}, ease:Back.easeOut}, -.4) logoTL.to(mainInfo, 1, {css:{alpha:0}}) <div id="mainInfo">This is the text I have</div>
