I cannot get TweenMax.selector work correctly

March 28, 2019

Hello,

I'm using a software which creates html content. In order to add some special effects, a new option allows to publish within a iframe rather than in the page.

The devs add a new function in JS, getDisplayDocument(), to always get "document" without being aware if this option is on or off.

Rather than writing :

TweenMax.from(getDisplayDocument().querySelectorAll(".image"), 1, {autoAlpha:0, delay:0.3});

I wanted to use TweenMax.selector in order to set a context like that :

TweenMax.selector = getDisplayDocument().querySelectorAll;

TweenMax.from(".image", 1, {autoAlpha:0, delay:0.3});

But I can't get "TweenMax.selector" work correctly. There is no effect when I define it. I tried with jQuery, an empty function,... nothing changes.

So, I decided to hard-change the TweenMax.min.js of my resource. But I'm not pleased with this solution.

Can someone explain me what I'm doing wrong please ?

Thanks :)

March 28, 2019

Hello @dadoumda and Welcome to the GreenSock forum!

Any reason why your trying to use getDisplayDocument() ?? I only see that with use of https://www.trivantis.com/

For jQuery you have to do the following:

// define selector for simple selectors to work with GSAP
TweenLite.selector = jQuery;

GSAP under the hood already uses document.querySelectorAll() by default.

See: https://greensock.com/docs/TweenMax/static.selector

If your still having issue please create a reduced

See the Pen by pen (@pen) on CodePen.

demo example

Happy Tweening!

March 29, 2019

Thanks for your welcome Jonathan

Yes, I have to use getDisplayDocument() because Trivantis Lectora version>17 pushes this function. It's a way to get productions published correctly with or without the new option (using an iframe or not). It returns the good reference to "document".

Doing a codepen is difficult in this case... It's firmly tied up with Lectora. Allow me to precise my previous examples :

TweenMax.from(getDisplayDocument().querySelectorAll(".image"), 1, {autoAlpha:0, delay:0.3});

This instruction works in every contexts, as expected.

But my wish is to simplify my life and keep the good old syntax :

TweenMax.from(".image", 1, {autoAlpha:0, delay:0.3});

So I digged a little and found https://greensock.com/docs/TweenMax/static.selector. Yay !

My problem is that the following instruction changed nothing :

TweenMax.selector = getDisplayDocument().querySelectorAll;

And with further testing, I realised that defining TweenMax.selector never changed anything... TweenMax behaved as if I was not there. And I hate being ignored ... when coding !

Last news : I realised a simple test but couldn't post in Codepen because it's "under heavy load". I confirm I do not understand how Tweenmax.selector works...

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>TweenMax.selector</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="TweenMax.min.js"></script>
</head>
<body>
    <img id="img1" src="img1.jpg" alt="Image1">
    <img id="img2" src="img2.jpg" alt="Image2">
    <img id="img3" src="img3.jpg" alt="Image3">
    <script>
        // Function to make my example look like Lectora's context
        function getDisplayDocument() {
            return document;
        }

        function jQuery(el) {
            console.log("Selects with a pseudo jQuery");
            return getDisplayDocument().querySelectorAll(el);
        }
        function anonymousSelector(el) {
            console.log("Selects with an anonymous selector");
            return getDisplayDocument().querySelectorAll(el);
        }
       
        // Try with an anonymous selector
        TweenMax.selector = anonymousSelector;
        TweenMax.to("img", 1, {autoAlpha:0, delay:0.3});
        // The console reports "Selects with a pseudo jQuery" !!! It's not anonymousSelector which is called but jQuery.
        // If I comment function jQuery, no output, the default selector is used

    </script>
</body>
</html>

Thanks for your attention Have a nice day !

Edit : Codepen is back, I tried posting my above example but the Codepen's console sent nothing...

Edited March 29, 2019 by dadoumda
Codepen is back

March 29, 2019

Yeah, the way you were trying to do it had two problems:

You'd be losing the context of your querySelectorAll() call. That's a JavaScript scope thing, unrelated to GSAP.
You need to change the selector at the root level, TweenLite, not TweenMax.

Try something like this:

TweenLite.selector = function(value) {
    return getDisplayDocument().querySelectorAll(value);
};

Does that help?

April 1, 2019

Thanks a lot ! It works perfectly ! Happy to tween... and to learn more and more about js

Have a nice day !

Notifications

Messages

I cannot get TweenMax.selector work correctly

Warning: Please note

Recommended Posts

dadoumda

Jonathan

dadoumda

GreenSock

dadoumda

Create an account or sign in to comment

Create an account

Sign in

Recently Browsing 0 members