Jonathan

July 8, 2019

On 7/4/2019 at 2:57 PM, WebDynamix said:

I don't understand why to pay a fckin library when I see this kind of answers !

I know I'm late to the party. But without context you will get 3 different answers to a very vague question that can give you 3 different answers. Now me personally would have not even replied with an answer when someone is using or conveying profanity in the forum towards people trying to help them.

But like @Dipscom said above Club GreenSock has no relationship to the free GSAP support given here in this forum. The community members will help you out of the kindness of their hearts. So please lets be a little more civil, and in kind you will get users in the community who will go above an beyond to help you using their own private time.

Happy Tweening

July 3, 2019

Keep in mind when using GSAP. Its best to use the GSAP set() method instead of the jQuery css() method. The reason being is that you will be changing CSS properties outside of GSAP. So this way GSAP can keep track of those CSS properties changed outside of itself by using the set() method. It will save you a lot of stress and hair pulling :blink:

GSAP set() method: https://greensock.com/docs/TweenLite/static.set()

Happy Tweening

July 3, 2019

On 6/30/2019 at 9:01 AM, clickdeproduto said:

yes, I was looking for a solution for gradient text without css, just with javascript, so that it would be compatible with older browsers, the animation only worked in firefox in version 67.

What specific browsers and browser versions are you trying to target?

June 21, 2019

19 hours ago, Shrug ¯\_(ツ)_/¯ said:

I thought it was fitting in light of the original tone of the thread.

It is good to see a fellow smiley face around here.

You have one up on me, since my avatar does not have any hands. But that's what mustaches are for.

June 20, 2019

On 9/22/2017 at 6:37 AM, GNB said:

May be its this cultural thing, but in my side of the world if you make a fool of someone and make them wait in a queue and dont reply, its natural to get a snarky question or worse, if they feel they will not be answered.

Sorry, I know this thread is years old, but i had to respond to this rude "cultural thing". Complaining that someone ( @OSUblake ) didn't take their own personal free time to help them with an in depth, time consuming question, with not even a whiff of being thankful or understanding.

How dare you Blake not respond later that night while still suffering the effects of Hurricane Irma? You will always get at least one person who expects they should be waited on like your their coding butler manservant.

Don't worry Blake I'm sure there are plenty of users in the forum who are grateful for your help!

June 19, 2019

13 hours ago, OSUblake said:

I understand why clients want to support every browser, but I try to get them to rethink that... maybe by charging them extra to support IE with all the bells and whistles. ?

There are some online stores that actually charge the customer an extra fee if purchasing within Internet Explorer.

June 19, 2019

Hello @mrrobot993 and welcome to the GreenSock Forum!

I don't see the codepen example your trying to reference. That codepen link just goes to the homepage of Codepen.

Please include the code example so we can better help you.

Happy Tweening!

June 19, 2019

8 hours ago, Jaexplorer said:

Have you thought maybe your extending it's life span by continuing to support it? If we stop supporting it, eventually the "clients" will drop it. You don't even know whether all those that have IE, even use it.

Its always good to support any browser that hasn't reached its life cycle, so you can have your product work on any browser not put to death. Also IE11 was the highest Internet Explorer version you could get on Windows 7. Windows 7 is reaching its life cycle in another year.

Internet Explorer (IE) 10 will reach its end of support on January 31, 2020. So that means IE11 will also reach the end of its life cycle some time after that.

Here is Microsoft's list of their End of Cycle charts for Internet Explorer

https://support.microsoft.com/en-us/help/17454/lifecycle-faq-internet-explorer

June 18, 2019

Hello @Jaexplorer and welcome to the GreenSock forum!

1 hour ago, Jaexplorer said:

I found this worked. But i'm rather disappointed I had to resort to this answer. Especially with css grid and dynamic elements. I thought calc would of been covered in greensock.

The CSS calc() function is not even a CSS property that you animate, it is a computed equation value that gets parsed by the CSS parser in the browser like @Visual-Q advised above.

So technically calc() is not a property that is animatable, since it is a function that is used as a value. And like @OSUblake advised the browser just reports the calculated value when requested by GSAP or any other JS property that accepts a <calc>, <length>, <frequency>, <angle>, <time>, <percentage>, <number>, or <integer>.

Please see the CSS calc() spec:

https://drafts.csswg.org/css-values-3/#calc-computed-value

https://drafts.csswg.org/css-values-3/#calc-notation

https://drafts.csswg.org/css-values-3/#calc-syntax

https://drafts.csswg.org/css-values-3/#calc-type-checking

Happy Tweening

June 18, 2019

Your probably looking for the onDrag function:

https://greensock.com/docs/Utilities/Draggable

onDrag: Function -
a function that should be called every time the mouse (or touch) moves during the drag. Inside that function, "this" refers to the Draggable instance (unless you specifically set the scope using onDragScope), making it easy to access the target element (this.target) or the boundary coordinates (this.maxX, this.minX, this.maxY, and this.minY). By default, the pointerEvent(last mouse or touch event related to the Draggable) will be passed as the only parameter to the callback so that you can, for example, access its pageX or pageY or target or currentTarget, etc.

Happy Tweening

June 18, 2019

That explains it.. That is why i asked above you if you were setting your initial CSS transforms outside of GSAP.

In your case using the jQuery css() method.

GSAP has no way of knowing when you set a transform outside of it, especially when using the jQuery css() method.

That is why it is always better to set your transforms with GSAP like i advised above, so GSAP is kept in the loop of what your changing.

So you don't change CSS your trying to animate oustside of GSAP.

Happy Tweening

June 18, 2019

You should try setting the initial transform and perspective with GSAP. It will handle all the browser vendor prefixes if needed for each browser. And then will allow GSAP to record and keep track of your CSS transform changes.

TweenMax.set(".drag_zone", {scale:1, x: "-50%", perspective: "600px"});

// then your other GSAP code goes here

Also keep in mind that GSAP also has xPercent and yPercent instead of using x or y, for when you need to do a percentage based transform for translateX and translateY.

xPercent and yPercent, percentage based transforms: https://greensock.com/gsap-1-13-1

See the Pen rAetx by GreenSock (@GreenSock) on CodePen

If your still having an issue please create a codepen demo example like I described above.

Happy Tweening

June 18, 2019

Hello @ninmorfeo and Welcome to the GreenSock Forum!

How are you setting your initial transform translate3d() ?
Are you setting it with GSAP using a set() or are you doing it some other way in the CSS outside of GSAP?

The reason being is you could be setting it outside of GSAP. But this will be hard to debug without seeing your code in context.

But to better help you please create a limited codepen demo example so we can see your code live and in an editable environment.

Happy Tweening

June 14, 2019

Hello @Duke3D and Welcome to the GreenSock Forum!

This is more of general JS question related to event binding and listening of an element, than a GSAP API specific question.

Now this could be done by just adding an addEventListener() on the load event for the element your checking if its loaded.

But for my own uses, I have a little jQuery monitor element is loaded script i use to check if various elements are loaded.

/* monitor if element is loaded (minified jquery plugin) */
(function($){jQuery.fn.monitor=function cb(callback){var set=this.first();var h=set.height();var w=set.width();var txt=set.text();var html=set.html();(function flux(){setTimeout(function(){var done=h==set.height()&&w==set.width()&&txt==set.text()&&html==set.html();if(done){if(jQuery.isFunction(callback))callback()}else{h=set.height();w=set.width();txt=set.text();html=set.html();flux()}},500)})()};})(jQuery);

Its usage is like this

/* run monitor check on element #BillVector */
$("#BillVector").monitor(function(){   
  
  // code to run when element is loaded
  console.log("#BillVector is loaded");  
  
});

And here is your codepen with that Monitor Element Loaded jQuery script in it.

You will see console log fire when #BillVector element is loaded. Check console for output:

See the Pen ydeJmp?editors=1111 by jonathan (@jonathan) on CodePen

Happy Tweening

June 13, 2019

That solution I advised on was just CSS and doesn't require animating since its already part of the overlay your already animating. Normally that type of thing would have to be done with an extra element and also having to animate that element in sync with your original overlay. Or adjusting the background offset like @Visual-Q advised above.

But your issue was more of having to do with the setup of your layout. And Pseudo-Elements allow that flexibility of not having to create extra elements into the DOM since you wanted the overlay to have 2 background-colors. GSAP just simply animates that layout and or elements you already have marked up. Since GSAP can animate any element or object and allows you setup your html, svg, canvas, webgl, js object ... etc.. the way you want

But glad you found it useful

June 13, 2019

Hello @Emilek1337 and Welcome to the GreenSock Forum!

I have a different take on your question by just adding one CSS rule to your code.

But lets answer one of your questions... You asked the following:

16 hours ago, Emilek1337 said:

However, the background has 2 colors, and I obviously can set only 1 background color on the overlay.

Technically you can have 2 background colors on your element. This is done by using CSS pseudo-elements of ::before or ::after. The .img-overlay element has the pink color as its background, and the generated content of the ::after CSS will give that DeepSkyBlue as your 2nd background color.

For example you can add the following CSS rule to your codepen .img-overlay::after.

.img-overlay::after {
    content: "";
    height: 50%;
    width: 100%;
    background-color: DeepSkyBlue;
    z-index: 99;
    position: absolute;
    left: 0;
    bottom: 0;
    top: auto;
}

Like this:

See the Pen bPdyQG by jonathan (@jonathan) on CodePen

Happy Tweening

Resources:

Pseudo-Elements: https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements

::before https://developer.mozilla.org/en-US/docs/Web/CSS/::before

::after https://developer.mozilla.org/en-US/docs/Web/CSS/::after

June 13, 2019

Hello @JackIsJack44 and welcome to the GreenSock Forum!

That doesn't work in Chrome due to the nesting of SVG element within another SVG element.

You have to target your main parent <svg> #main and not its child nested <svg> #test.

var t1 = new TimelineMax();
  
t1.to('#main', 2, {x:200,y:200});

See the Pen agOrBJ by jonathan (@jonathan) on CodePen

Happy Tweening

June 12, 2019

16 hours ago, AslanGoi said:

So I use position absolute, because I read all problems with z-index and a 95% has the same issues and found only two solutions:

1) change position to absolute

2) change z-index of div in js

You forgot about number 3 that @OSUblake advised which is:

3) add a new stacking context

On what element you ask and how? .. That's a great question!

If you create a limited codepen demo example we can see see how it can solve your issue when we see your code live and in an editable environment to better help you.

Thanks and Happy Tweening

June 12, 2019

Hello @Adam Wright and Welcome to the GreenSock Forum!

Here is a link to the TweenMax from() Docs: https://greensock.com/docs/TweenMax/static.from()

So the from() method has 3 parameters.. specifically the target parameter:

TweenMax.from( target, duration, vars )

The target parameter

target: Object
Target object (or array of objects) whose properties should be affected. When animating DOM elements, the target can be: a single element, an array of elements, a jQuery object (or similar), or a CSS selector string like “#feature” or “h2.author”. GSAP will pass selector strings to a selector engine like jQuery or Sizzle (if one is detected or defined through TweenLite.selector), falling back to document.querySelectorAll().

So just like @Visual-Q advised jQuery is not required. But keep in mind if using the load event you want to stay away from the onload event and use addEventListener("load") instead, since the window.onload event can wipe out previously binded load events on the window object.

Here is a quick way to make sure you only run your GSAP code after the window is fully loaded and the DOM is fully ready. Below you will see that I first make sure the DOM is ready, and then check if the window is loaded. This makes sure that the HTML or SVG markup is fully ready and that the window is checked within that DOM ready event handler. That is a great cross browser solution.

The reason being is that sometimes the window event can fire before your DOM is ready or vice versa. That happens due to slow networks and connectivity. This makes sure that the window event fires, even if it it fires before or after the DOM is ready. So if the window load fires after the DOM ready.. it will fire as expected. If the window fires before the DOM is ready, it will wait and fire immediately after the DOM ready event. So this way you cover your bases

The Vanilla JS way:

// wait until DOM is ready
document.addEventListener("DOMContentLoaded", function(event) {
  
  // wait until images, links, fonts, stylesheets, scripts, and other media assets are loaded
  window.addEventListener("load", function() {
    
    // GSAP custom code goes here
    
  }, false);
  
  
});

The jQuery way:

// wait until DOM is ready
$(document).ready(function() {
  
  // wait until images, links, fonts, stylesheets, scripts, and other media assets are loaded
  $(window).bind("load", function() {
    
    // GSAP custom code goes here
    
  });
  
  
});

Happy Tweening

June 12, 2019

Hello @Jean-Tilapin and welcome to the GreenSock Forum!

7 hours ago, Jean-Tilapin said:

I'm sorry, this is really a beginner question, but I don't even understand why it does that, so I can't correct it by myself. What should I add ? Or in what direction should I look for the answer ?

You will get faster replies if you please create a limited codepen demo example. Since it will be hard to help you without seeing your code live and in context. Here is a video tut on how to create a codepen demo example.

Thanks

June 12, 2019

Yes @OSUblake is right the default z-index is auto. So in order to use z-index you must use either position (absolute, fixed, or relative), otherwise z-index will not be applied.

z-index: https://developer.mozilla.org/en-US/docs/Web/CSS/z-index

Happy Tweening!

June 8, 2019

Hi @dee

10 hours ago, dee said:

I get an error here and it seems it's not working on safari mac and iOs

If the error is coming from custom.min.js on Line 118, you should go to that line number in that file. Then you can narrow down what triggered that error

June 3, 2019

Hello @superasn and Welcome to the GreenSock Forum!

SplitText only splits up your text into lines, words, or letters. Then you animate those split text elements the way you want.

In GSAP those type of preset effects are done with easing, specifically with GSAP CustomEase.

CustomEase: https://greensock.com/docs/Easing/CustomEase

You can see here in the below codepen examples of those easing presets, for example in CustomWiggle.

See the Pen LRqkOr?editors=0010 by GreenSock (@GreenSock) on CodePen

Check out the Easing Docs on it

CustomBounce:https://greensock.com/docs/Easing/CustomBounce

CustomWiggle: https://greensock.com/docs/Easing/CustomWiggle

Also check out this video tut on how to use it

Happy Tweening!

May 31, 2019

Hello @danboyle8637 and welcome to the GreenSock Forum!

Looks like your not waiting until your elements are ready in React. codesandbox probably has issues when reloading iframes which is what makes up those view panels in codesandbox .

You might want to make sure you run your GSAP code once the DOM is fully ready.

In vanilla javascript it is the DOMContentLoaded event, in jQuery its the ready() event.

In React it is the componentDidMount and componentDidUpdate event listeners.

This way you know the DOM has all your elements loaded and ready before trying to have GSAP access them.

Happy tweening!

May 31, 2019

Hello @Elitzca and Welcome to the GreenSock Forum!

Is there any reason why your not referencing this for the current node your hovering over? Then you wont have to specify that simple class selector targeting all elements with those classes. That will allow you to target this, which will be the element your currently hovering over.

this: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this

You can see in the following codepen examples of running a loop to bind hover events to multiple elements. Then associating a timeline with each element and storing that timeline in the nodes properties to be accessed when hovering over each element.

Even though the below examples use jQuery for the loop, the technique is the same for vanilla JavaScript.

See the Pen KdYqWo by jonathan (@jonathan) on CodePen

and this one too

See the Pen rOgVEd by jonathan (@jonathan) on CodePen

I also noticed your HTML markup is malformed. You have an <li> tag with no parent of <ul> or <ol> in your above HTML markup.

So you have this:

<li class="div-link"><a href="#">Order parts</a></li>

It should be this with the <ul> or <ol>:

<ul>
  <li class="div-link"><a href="#">Order parts</a></li>
</ul>

If you provide a limited codepen we will be more than happy to help you figure out what your trying to do. Here is a link to how to create a limited codepen demo example so we can test your code live.

Happy Tweening!

Profiles

Forums

Store

Blog

Product

Showcase

FAQ

Downloads

Posts posted by Jonathan