Search the Community
Showing results for tags 'className'.
-
We have few sections with a data attribute (data-name) on each. We want to update the body classname when it enters the section. The data-name is the classname that we want to add to body. Below is my code, but it's not working: const updateBodyClassName = (name) => { //code to add/update classname to body/html class via data attribute (data-name) from section } const sections = gsap.utils.toArray('.section'); sections.forEach(section => { ScrollTrigger.create({ trigger: section, start: 'top center', end: 'somehow get the height of each section(??)', onEnter: () => updateBodyClassName(section.dataset.name), markers: true }) }); HTML: <div class="section" data-name="class1"> <h1>One</h1> </div> <div class="section" data-name="class2"> <h1>Two</h1> </div> <div class="section" data-name="class3"> <h1>Three</h1> </div> #1) I am trying to get the height of the sections since the height varies. This is for the 'end' parameter in the ScrollTrigger. #2) Not sure is there a way to update the body/html classname when we enter a section. I know there is a toggleClass, but this isn't what we need, since the class names are all different for each section. In the code, I have 'onEnter', so when it enters a section it will trigger the updateBodyClassName() function. In this function, it should go update the body/html class name: const updateBodyClassName = (name) => { //code to add/update classname to body/html class via data attribute (data-name) from section } For example, when we scroll to or enter section 1, the section 'data-name' value should get added to the body/html class, like below: <html class="no-js class1"> When it enter section 2, the section 2 'data-name' value should replace 'class1' from the html class (not appending class name), like below: <html class="no-js class2"> Is there a way to add a class name to body/html when it enters a section, then somehow replace the newly added class name when it enter another section? Thank you!
-
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
-
Hi! I'm a little stuck on a little issue ? I am trying to make a simple responsive variable in a tween. At different screen sizes, the box needs to move up by varying amounts ( does not work with yPercent ) It was suggested somewhere on this forum that className would work for this, but the css values seem to 'cache' to whatever rules applied at the screen size on page load. i.e. On the codepen the red box should move to the top of the grey bar, and < 1000px turn black, > 1000px turn green. It does this if you run the pen at either size, but if you resize live the initial css value is always used. Is there an easy way around this? Or a simpler method? I also tried using modifier plugin, as suggested elsewhere, but had similar results ( I couldn't find the modifiers plugin js link to make another codepen, commented out in my demo ) I'm guessing some sort of destroy / rebuild the timeline on resize would do the trick, but would be nice if I didn't have to do that? ( maybe not relevant but I am attaching it to a scrollmagic scene, which triggers the shrink / expand nav logo on scroll ) Cheers Greensock you're awesome!
- 2 replies
-
- responsive
- classname
-
(and 1 more)
Tagged with:
-
Hello, I have some unexpected (for me) behavior while sizing elements, here is the pen: As you see, red box is not synced with blue while animation runs (after clicking). It happens because the height of the container is animated, but it is not supposed to be, as the .clicked (container css class) doesn't contain height property. Can you explain please, how to animate only properties defined in target class?
-
Hello Everybody I'm experimenting with tweening CSS classes containing 3d transforms. It works very well in most cases but I’m stuck with the getting rotations into the right direction. I wish the “DirectionalRotationPlugin” would help me out here. But I wouldn’t like to set the target values via JavaScript. Please click the door in my pen to see what I mean and check the CSS class “.open”. Maybe it is a pure CSS problem. Any advice is very welcome. Henry
- 4 replies
-
- directionalrotationplugin
- classname
-
(and 1 more)
Tagged with:
-
Anybody have an issue with className? I use className to add a class to stop the main page from scrolling when a window(modal) is in view. Sometimes it is removed on timeline reversal. Sometimes it doesn't remove. When it doesn't remove it leaves the main page un-scrollable. I've got 3 sites in production at the moment and this happens on all of them.
-
Hi all, Currently I'm testing a website on which I use some GSAP animations. One of this animations causes a error in Firefox (v51 run a Macbook Pro retina). This is the code that causes the error: this.tl .set(this.modalBackground, { display: "block", className: "+=" + this.modalBackgroundModClass }) The classname line causes the following error in Firefox: TypeError: this.ownerSVGElement is null This code does work on all other devices and browsers on which I've tested on. I also can make it work by adding the class like this: this.tl .set(this.modalBackground, { display: "block", onComplete: function () { this.modalBackground.classList.add(this.modalBackgroundModClass); }.bind(this) }) But I would like to use the className way. Any idea on what is going wrong? Thanks in advance.
-
Hi guys, Just quickly (I haven't got time atm to slap an example codepen together), is there a way to toggle the CSS className attribute? I have an object that's being manipulated a lot, and one of the tweens is removing a class from an element, and animating it's new position accordingly. className: '-=responsive-example_small' This works fine, until I reverse the timeline... At which point the class isn't re-added to object, and obviously, no animation occurs, resulting in a broken reverse animation. I know I can remove the "-=", but that overwrites all the classes on the element in question as well, which is again, undesirable and dangerous to maintain. Is there a toggle for ClassName that I simply haven't come across before? Much like JQuery's $(e).toggleClass('someClass')? If not, is it a possibility for the future? Thanks a lot!
-
Hello Greensock, I am trying to tween and add 2 className to the same element using greensock. Please refer to the codePen example, i would like to add .bkg-color & .bdr to the #element, but somehow the first added class is then replaced by the 2nd tween. Any advise will be appreciated http://codepen.io/yengkit/pen/QEAXBB
-
Hi! Think I found a bug of some sort that if I add a class name using TweenMax and my tweening object has already a classname that contains the same word it removes. Example: Want to add a class by name: "hover" My div has classes: <div class="btn animate-hover color-green">My Button</div> The result will be: <div class="btn animate- color-green hover">My Button</div> It shouldnt behave like that am I right? If using underscore it works: <div class="btn animate_hover color-green hover">My Button</div> Possible to solve this? Many thanks!
-
Hello Carl, Jonathan & all GSAP crew. First of all I wanna tell you HUGE THANKS for your awesome library. GSAP is the best one for web animation. W3C should add it for standarts of HTML5 or HTML6 =) Now about my strange issue. For my project i used scrollTo plugin & TweenMax.to className. Animation works fine when you click once or twice on image. But if you click a few more times animation starts glitching. And few more times & browser hangs off. I have 10 images on page & when you click on every image to expand it animation starts glitching too. Maybe it's problem with logic of my code or something else. I created a small codepen demo to show you my problem. Please help me to solve it.
- 4 replies
-
- performance
- scrollto
-
(and 1 more)
Tagged with:
-
Hi there, I'm building a custom collapse navigation. See codepen: http://codepen.io/anon/pen/GZKmaR The 'nav' element needs to toggle two classNames. If its collapsed (by click), and if its animating(by timeline). Some how, the 'collapsed' class will not be removed if you close the navigation. If i remove the +=animating classnames in the timeline, it will work.. Of course, i can rebuild the HTML and toggle the className on another element to fix this issue, but i dont want that Does anyone has the same issue and is there a simple fix?
-
Hy guys, I love your library since the Flash times I just found what I think is a bug. In the codepen link there is an example. If you tween a class which name is contained in another class, the part of name of tweened class was subtracted on the other class <div class="open-sub" id="tween"></div> if I tween a class with the name "open" TweenMax.to("#tween", 1, {className: "+=open"} ); // +=open or -=open produce same bug the "open-sub" class will become "-sub" Nothing breaking, but could lead in a very tricking result
-
Greetings, I've encountered a strange issue where tweening a class name in a timeline causes issues when you reset that timeline via pause(0). The codepen has more info, please check it out: http://codepen.io/anon/pen/NGRgKB Please let me know if my syntax is incorrect, or perhaps if changing classes using both Greensock and jQuery might be causing the problem. Thank you! -Gwen
-
Is there a way to override properties set by GSAP when tweening a className? Here's a demo where I initially set my boxes to a height of 50. I then tween them to a class that has a height of 150, but the height won't change unless I use clearProps. However, I really don't want to clear any props and you can't animate the clearing of props.
-
Hi, I have some issue since the last update with "-webkit-" Not sure this bug has been fixed FIXED problem caused by some Webkit browser reporting redundant/duplicate transform values (in both "transform" and "WebkitTransform") of the computed style which could cause className tweens to act oddly.I make a simple TweenMax.to('element', 1, {className: "+=active"}); and bam ! http://codepen.io/stephanedemotte/pen/bNRXYO Only on Safari and Chrome. Everything good with gsap : 1.15.0
-
hi! I'm doing something a bit like this; TweenMax.to(element, 0.3, {className:'+=over'}); where the .over class has different colour, position etc, but also different background-position. My problem is, i'd like the background-position to not tween, while the rest of the properties do. is there a way to add an exception to the tween? Any ideas? thanks, Andy
- 3 replies
-
- css
- background-image
-
(and 1 more)
Tagged with:
-
I seem to be having an issue adding a class with className when I already have 3 classes on an element. This is the line I'm using: TweenLite.to(this.element, 0.1, {className:'+=maximized'}); Thoughts?
-
Obviously we can animate between classes by either adding or removing them... but can we do both, without affecting other classes attached to the element? For example, if I have: <div id="my-div" class="item position-1"></div> Can I replace position-1 with position-2 ? I also note that CSS3 transforms are supported, but all vendor prefixes are required -- so how would this work with IE<9? As a side note, I'm working with: * VERSION: beta 1.9.6 * DATE: 2013-05-07 So if any of these issues have been addressed in the latest versions I'm more than happy to upgrade.
-
When I attempt to tween using className, I am not seeing a tween of that classes properties as it is applied/removed, but rather an instantaneous application/removal of the class. I have had this problem on a few projects, and it is usually in a menu when I am trying to tween the activated menu item. I am using this version of greensock:http://code.jquery.com/jquery-latest.min.js ex: //to activate: TweenLite.to(element, 1, {className:"active" ,ease:Linear.easeNone}); //to deactivate: TweenLite.to(element, 1, {className:"" ,ease:Linear.easeNone}); Is there something I am doing wrong or not understanding?
-
i was trying to use the className property on TweenLite to add and remove a css class from an element during mouse over an mouse out. using jquery, i had done something like this: this.$container.hover( function( evt ) { TweenLite.to( _this.$content, 0.5, { className: "+=open", ease: Expo.easeInOut }); }, function( evt ) { TweenLite.to( _this.$content, 0.5, { className: "-=open", ease: Expo.easeInOut }); }); the problem i'm having is when i interrupt the animation with another mouse event that will cause it to remove the class before the animation is finnished, it seems the class name doesnt actually become added onto the element until after the animation is complete. so if you hover in and hover out before the animation completes, there wont be any class name to remove and the tween for removing the class will be ignored. i hope this makes sense. thanks for you time!
-
Hello, I'm using the following code to animate a div coming in and to add a class to a second div. Working perfectly on the mac and ios but on windows there are some issues. ie8 animation working but the classname is not being added (haven't tried newer versions). firefox nothing is working. here is my code: $(document).ready(function() { var tl = new TimelineMax(); tl.append( TweenLite.to(awardOne, .125, {css:{className:"+=awardOneOn"}}) ); tl.append( TweenLite.to(awardOneContent, .125, {css:{autoAlpha:1}}) ); tl.append( TweenLite.to(awardOneContent, .5, {css:{height:159,top:480}}) ); tl.pause(); awardOne.onclick = function() { tl.play(); }; closeIcon.onclick = function() { tl.reverse(); }; }); Thank you -Dennis
-
Hi Jack, thanks for the gsap. From what i see the overwrite auto does not work for tweens initiated via css className. So if you have say an on-mouseover and add a css class {css:{className:"+=class1"}} and then mouse-out before the css property tweens are complete and remove the class {css:{className:"-=class1"}}, the first tween/s are not cancelled and continue to completion - and then the remove class takes effect immediately. If you use overwrite "all" - all tweens stop as expected. Cheers
- 4 replies
-
- javascript
- css
-
(and 2 more)
Tagged with: