Jump to content
Search Community

Problem with clearProps

mikel test
Moderator Tag

Go to solution Solved by OSUblake,

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hi,

 

Objective: Presenting two books in a responsive layout.

 

It seems that a clearProps is needed when it comes to changes of window size.

Otherwise a conflict is arising between mediaquery and tween.

I tried a lot with no effort ...

 

Please give some hint. See Codepen

 

Best regards from Hamburg

Manfred

See the Pen dYgdZv by mikeK (@mikeK) on CodePen

Link to comment
Share on other sites

Thanks for the demo but I'm not sure what it is supposed to do. please explain how to use the demo, what the desired outcome is and what is not working right.

Its way too much code to try to imagine how it should work. If you can reduce it down further that would really help.

For instance, if you do not need 4 timelines, please remove the ones that aren't necessary. If you can replicate it with a single timeline with a single tween... even better.

 

Based on what I do understand I think instead of building multiple, conflicting timelines when your page first loads, only build timelines when you need them by calling functions. these functions would possibly clear any existing timelines, clearProps on all the DOM elements, creates new tweens in your timeline like

function animateBlueMobile() {
  transitionTimeline.progress(0).clear();
  TweenLite.set([element1, element2, element3], {clearProps:"all"});
  transitionTimeline.to(...)
  .to(...)
  .to(...)
  .to(...)

}
  • Like 2
Link to comment
Share on other sites

Hi Carl,

 

sorry for too much code.

 

When browser window opens in small size tween runs correct (.partBlue height: from 50% to100%).

Also correct when opended as big size (here left from 0 to 75%).

 

But if i change the window form small to big and vice versa animations not working as intended.

 

A new pen: 

See the Pen pjxXgo%C2%A0 by mikeK (@mikeK) on CodePen

But her I can´t open in small size and the issue can not be simulated.

 

Therefore please have a look to a test version on my server: http://www.redmax.hamburg/test/ 

 

Thanks in advance

Manfred

Link to comment
Share on other sites

Hi Carl,

 

the video caused my fear that I didn´t explain the intended animation running in the small size precisely.

 

Please have a look to: http://www.redmax.hamburg/test/test.mp4

 

The "inline props"  are not active after tweening.

 

Just an idea: the recommendation of DIACO in http://greensock.com/forums/topic/11647-clearprops-on-reverse/

But no success implementing it in my contruction.

 

In advance of a smart solution.

 

Best regards

Manfred

Link to comment
Share on other sites

Don't listen for window resize events if you are trying to do media queries. Use media query listeners.

var mediaQuery = window.matchMedia("(max-width: 480px)");
mediaQuery.addListener(setAnimation);

// First run
setAnimation(mediaQuery);

function setAnimation(mediaQuery) {
  if (mediaQuery.matches) {
    // Set max width animation
  } else {
    // Set other animation
  }
}
  • Like 3
Link to comment
Share on other sites

Great advice, Blake. Thanks!

 

Mikel, I believe your solution lies with integrating Blake's suggestion with my "timelines on demand" concept.

In addition this all ties back to your original assumption as well... You need to also call clearProps on all the properties of all the elements that you have tweened whenever the size changes. 

 

Unfortunately I just don't have the time to test all the permutations at the moment. 

  • Like 2
Link to comment
Share on other sites

Hi Carl,

Hi Blake,

 

Thanks for your effort.

 

I understand only a little of all the coding - I´m not a coder.

But I got it (?) due to your hints:  

See the Pen meQQdp by mikeK (@mikeK) on CodePen

 

Next woud be what could happen if window size is changing and BigBlue/SmallBlue is "active"?

That's a different kettle of fish. 

 

Best regards from Hamburg

Manfred

Link to comment
Share on other sites

  • Solution

Hi @mikel
 
You really only need one media query because your CSS only has one "max-width: 480px". That's why I had the if/else in there. It will be one or the other. Check this out. I removed a lot of redundancy and set it up so that it can rebuild the timeline while you are resizing the window.

 

See the Pen ?editors=001 by osublake (@osublake) on CodePen

  • Like 4
Link to comment
Share on other sites

Hi Blake

 

Your recommondation is really smart.

 

I tried to combine all animations I planned for my final web: 

See the Pen ZbwGQx by mikeK (@mikeK) on CodePen

Every anim is fine exept the situation anim BLUE/GREEN is "active" and window size is matching.

 

Of course I don´t understand the coding if complex and aggregated.

Nevertheless it is a great pleasure for me to gather experience with Greensock and JS.

 

Kind regards

Manfred

Link to comment
Share on other sites

Awesome! Seems you did a good job figuring out most of what I did. I think the problem with the active window resizing has to deal with the reversed variable I created. Since there are 2 timelines you should make 2 variables for that.

var blueReversed = true;
var greenReversed = true;

I just quickly added those and it seems to work.

 

See the Pen ZbPxjN?editors=001 by osublake (@osublake) on CodePen

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...