Jump to content
Search Community

Search the Community

Showing results for tags 'class'.

  • 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 14 results

  1. Hi All, I created a JS class that uses the Draggable plugin. Once I added a second slider to the codepen, it will only drag on the first slider. I checked the documentation and gave each one an id just to be sure. The strange part about it's when I try to drag the second slider. It moves the first one instead the the second. Can anyone tell me what I am doing wrong when creating my Draggable.create() on line 214?
  2. Still learning javascript and gsap, so don't judge! Why is d2 pink? style = document.createElement("style"); document.getElementsByTagName("head")[0].appendChild(style); style.innerHTML += " .d1 { font-name:'Arial'; font-style:italic; font-size: 48px; color: purple; }\n"; style.innerHTML += " .d2 { font-name:'Arial'; font-style:italic; font-size: 80px; }\n"; style.innerHTML += " .d3 { font-name:'Arial'; font-style:italic; font-size: 48px; color: purple;}\n"; function div(d) { var e = document.createElement("div"); e.setAttribute("id", d); document.getElementsByTagName("body")[0].appendChild(e); return d; } TweenMax.set("#"+div("d1"), {text:"d1", className:"+=d1"}); //purple TweenMax.set("#"+div("d2"), {text:"d2", className:"+=d2", color:"red"}); //pink??? TweenMax.set("#"+div("d3"), {text:"d3", fontSize:"60px", /*className:"+=d3",*/ color:"red"}); //red
  3. please help me !! Sorry for the Google translation ( ㅠ_ㅠ) <style> .parent{width:500px; height:500px; background-color:#000} .parent .child1{position:absolute; width:100px;height:300px; display:none; background-color:#f00} .parent .box1{position:absolute; width:50px; height:50px; background-color:#0f0} .parent .child2{position:absolute; width:300px;height:300px; display:none; background-color:#00f} .parent.on .child1{width:50px; height:500px; display:block; background-color:#ff0;} .parent.on .box1{width:30px; height:30px; left:300px; top:300px;} .parent.on .child2{width:500px; height:30px; display:block; background-color:#0ff;} </style> <div class="parent"> <div class="child1"> <div class="box1"></div> </div> <div class="child2"> </div> </div> TweenMax.to(".parent", 1, {class:"+=on"}) //Does not work TweenMax.to(".parent .child1", 1, {class:"+=on"}) //Does not work I know that you can animate through classes. BUT How can I animate child elements through a class of parent elements?
  4. Hello guys, I'm finding my code too complicated at this point. What I want to achive is add another class to a div when the screen size is < 768px. After that I'd like to assign an animation to this particular double class, in my example is : .main-navigation.mobile Unfortunately nothing works, probably because greensock starts when the page is loaded and not when the screen is resized. What do you think ... the code is above: var $window = $(window); var toggleNav = $('.toggle-nav'); var mainNav = $('.main-navigation'); var mainMenuList = $('.main-navigation.mobile ul li'); // Timeline for the Main Menu var tl_menu = new TimelineLite({ paused: true, reversed: true }); tl_menu .staggerFrom(mainMenuList, 0.3, { autoAlpha: 0, x: 10, ease: Power1.easeOut }, 0.2) // Resize window function resize() { if ($window.width() < 768) { return mainNav.addClass("mobile"); } mainNav.removeClass("mobile"); } $window .resize(resize) .trigger('resize'); $(".toggle-nav").on('click', function () { $('.menu-overlay').toggleClass("open"); tl_menu.reversed() ? tl_menu.play() : tl_menu.pause(0).reversed(true); }); Thanks, Manny
  5. In my codepen - I'm instantiating elements from a class. x, y and backgroundColor successfully update. Scale fails to update. I'm updating scale exactly the same way I'm updating backgroundColor. I've tried everything I can think of... What's going on here?
  6. I am having some troubles with the document.querySelectorAll() because, I don't know why, it doesn't work when I add more than one class or ID. So, this is what I want to achieve: http://codepen.io/sonder15478/pen/PpJqKN But there's a lot of code that I wouldn't need if I use document.querySelectorAll(). This is where I get stuck: http://codepen.io/sonder15478/pen/xqXGXm I also tried with getElementsByClassName(), but it didn't work either... Any ideas? Thank you!
  7. This seems like such a simple question. But I spent the last 2 hours trying to figure this out to no avail. I even asked a coworker with some experience in SVG. Why can I not change the Mask call out from "ID" to "Class"? In my example you can see that I simply copied the code from this original post ( http://codepen.io/PointC/pen/KzmXYK ), and pasted it using classes in stead of IDs, and it breaks the mask. What am I missing? This technically isn't a GreenSock question, but I am feeling a little desperate. Thanks for any help!
  8. 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.
  9. 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?
  10. Hello, I want to add a class to an object on a specific position in the timeline. tree.add($('#map-container').toggleClass('show-map'),3); didn't work. (tree is a timeline) How can I make something like this? Thanks in advance: Thomas131
  11. I am trying to animate back and forth between two css classes and I'm having some issues right now I have two classes "contracted" and "expanded: .button{ border: 5px #000 solid; } .contracted{ width:100px; height:100px; background-color:green; } .expanded { width:200px; height:200px; background-color:red; } And im trying to switch between them with: $( ".button" ).click(function() { TweenMax.to(".contracted",2,{css:{className:"+=expanded"}}).set(".contracted",{delay:5,css:{className:"-=contracted"}}); TweenMax.to(".expanded",2,{css:{className:"+=contracted"}}).set(".expanded",{delay:5,css:{className:"-=expanded"}}); }); http://codepen.io/anon/pen/vzayE And it will tween from "contracted" to "expanded"... but not vice-versa... Is there a proper way to switch classes?
  12. Hello! Is it possible to load objects outside the "complete" events ( LoaderEvent )? Right now, it's like this: function initLoader():void { xmlLoader = new XMLLoader( "PathToXml/xml.xml", { onComplete:loadData } ); xmlLoader.load(); } function loadData( e:LoaderEvent ):void { loaderMax = LoaderMax.getLoader( "loaderID" ); loaderMax.addEventListener( LoaderEvent.COMPLETE, completeLoader ); loaderMax.load(); } function completeLoader( e:LoaderMax ):void { texture1 = TextureFromBitmapData( LoaderMax.getLoader( "image1" ).rawContent.bitmapData ); texture2 = TextureFromBitmapData( LoaderMax.getLoader( "image2" ).rawContent.bitmapData ); texture3 = TextureFromBitmapData( LoaderMax.getLoader( "image3" ).rawContent.bitmapData ); (...) } And it works, but I have to write this in every class of my app, not handy if I have to change something... That's why I wanted to create a "LoaderScreen" class, that I call where I need, with some methods to help me to handle all the assets / loaders. More or less like this: class LoaderScreen public function LoaderScreen( loaderId:String ) { xmlLoader = new XMLLoader( "xml", { onComplete:loadData } ); xmlLoader.load(); } private function loadData( e:LoaderEvent ):void { loaderMax = LoaderMax.getLoader( loaderID ); loaderMax.addEventListener( LoaderEvent.COMPLETE, completeLoader ); loaderMax.load(); } private function completeLoader( e:LoaderEvent ):void { // nothing here } // HELPERS -- public function loadBitmapdata( id:String ):BitmapData { return mainLoader.getLoader( "texParticleMenuHome" ).rawContent.bitmapData; } And now I want to create a LoaderScreen object, and try to load stuff: class Anywhere public class Anywhere() { var loaderScreen:LoaderScreen = new LoaderScreen( "myID" ); addChild( loaderScreen ); texture1 = TextureFromBitmapData( loaderScreen.loadImage( "image1" ) ); texture2 = TextureFromBitmapData( loaderScreen.loadImage( "image2" ) ); texture3 = TextureFromBitmapData( loaderScreen.loadImage( "image3" ) ); } But it returns "null" when I'm not in the "complete" event handler ( LoaderEvent ). trace( mainLoader.getLoader( "xxx" ) ) in the complete event return something trace( mainLoader.getLoader( "xxx" ) ) outside, return null It's a kind of "AssetsManager" I guess ( based on my framework ) but I only need to know how I can load stuff outside the LoaderEvent. If anyone can help me, or have a suggestion...! Thanks!
  13. I am trying to get the id/class from the animated div in the callback-function. What information does the callback-event contain? Is is the tween or is it possible to get information about the animated object the tween is using (in my case a div)? Thanks in advanced!
  14. Hi, I am wondering if it's possible to tween children elements just by setting class name of a parent element. Just in case the question is not clear I have prepared a JSFiddle to illustrate the problem: http://jsfiddle.net/ESS4c/ The goal is to have paragraph text nicely animated between both states. Is that possible?
×
×
  • Create New...