Jump to content
Search Community

scrollmagic

kmytor test
Moderator Tag

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

hello, again me
they can help me I have two other problems I am not a programmer and I am in the apprenticeship

I'm trying to make scrollmagic work in codepen.io
the other thing is that I want this chain of aniamacion to run but it does not hold anything

    if (window.matchMedia('(max-width: 320px)').matches) {
      TweenMax.from(".astro1 picture", 5, {
        top: "0%",
        delay: 1
      })
    }

 

Uncaught SyntaxError: Unexpected token if

 

 

Gracias 

 

See the Pen GzaYNN by kmytor (@kmytor) on CodePen

Link to comment
Share on other sites

ScrollMagic is not a GreenSock product, but I can try to point you in the right direction. To allow ScrollMagic to hijack the tweens you'll need the GSAP plugin. I'd also recommend using the indicators plugin so you can see if your triggers are where you expect them.

 

<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.6/plugins/animation.gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.6/plugins/debug.addIndicators.min.js"></script>

 

I'm not really sure what you're trying to do with the animation, but adding those scripts should help you get started. You can also post your ScrollMagic questions here:

https://github.com/janpaepke/ScrollMagic/issues

 

Happy tweening.

  • Like 3
Link to comment
Share on other sites

On 2/21/2019 at 4:55 PM, PointC said:


Hi again and I apologize, I'm looking everywhere where they can give me an answer on how to handle a condition in a timeline but not the answer can you help me?
 

See the Pen GzaYNN?editors=0010 by kmytor (@kmytor) on CodePen

 

AnimaWeb.to(".ass picture", 1, {
      top: "-=50%",
      delay: 0
    })
    .to(".ass picture", 5, {
      top: "30%",
      position:"fixed",
      filter: "blur(0px)",
      delay: 0
    })


//how do you do this

if (window.matchMedia('(max-width: 320px)').matches) {
     TweenMax.from(".ass picture", 5, {
        opacity: ".5",
        delay: 1
      })
} else { 
  TweenMax.from(".ass picture", 1, {
        opacity: "1",
        delay: 1
      })
}
        
    .to(".ass picture", 1, {
      top: "90%",
      scale: 0.1,
      filter: "blur(15px)",
      delay: 0
    })
 
    .to(".bg", 2, {
      top: "+=200%",
      delay: -1
    });
 

Link to comment
Share on other sites

I'd probably just check the window width and set my values accordingly. Maybe something like this:

 

See the Pen oVNYzM by PointC (@PointC) on CodePen

You'd have to listen for a resize event and rebuild if necessary, but that should get you started.

 

On a separate note, I see you're posting this project and questions in several threads. If it's about the same project and related questions, please keep everything in one thread. Thanks.

  • Like 3
Link to comment
Share on other sites

I am sorry if I publish it in many parts it is that I need an answer that I do not have and nobody thinks that I understand what I want to do,
I'm sorry I'm going to put it another way to see if you understand me.

 

See the Pen GzaYNN?editors=0010 by kmytor (@kmytor) on CodePen

 

function intro() {
if  (window.matchMedia('(max-width: 320px)').matches)
) {
var tlintro = new TimelineMax();
console.log("load desktop");
} else {
var tlintromobile = new TimelineMax();
console.log("load mobil");
}
Link to comment
Share on other sites

I think everyone understands what you're trying to do. If the user is on a small screen, you want one animation. If they are on a wide screen, you want a different animation. I showed you in my demo how to check the window width and set the animation differently depending on the result.  As for the code you just posted, you have some typos which will prevent it from working. Please try this:

 

function intro() {
  if (window.matchMedia("(max-width: 320px)").matches) {
    var tlintro = new TimelineMax();
    console.log("load desktop");
  } else {
    var tlintromobile = new TimelineMax();
    console.log("load mobil");
  }
}

 

I'd recommend creating the timeline outside of that function and just add the appropriate tweens to it depending on window size.

  • Like 3
Link to comment
Share on other sites

That function works just fine. Load the demo at different screen sizes and you'll set that the box changes to red on small screens and yellow on large screens. 

 

I don't know how it could be both red and yellow. If you're talking about a resize event, I mentioned that earlier. If a user resizes the screen, you may have to rebuild the timeline and ScrollMagic scene.

  • Like 2
  • Haha 1
Link to comment
Share on other sites

12 hours ago, PointC said:

That function works just fine. Load the demo at different screen sizes and you'll set that the box changes to red on small screens and yellow on large screens. 

 

I don't know how it could be both red and yellow. If you're talking about a resize event, I mentioned that earlier. If a user resizes the screen, you may have to rebuild the timeline and ScrollMagic scene.

 

Hello
I understand you I do not explain myself very well, forgive me ...
I made another example with the example that you made me
but I am not very expert in programming, I defend myself with the basics and I wanted to do something more advanced but when I saw that it did not fit in the mobile I was forced to try a conditional
so that it fits the animations

look this is my example

 

See the Pen ywNbwJ?editors=0010 by kmytor (@kmytor) on CodePen

 

Link to comment
Share on other sites

I think you may be overthinking this project. You're trying to create a timeline for desktop and a separate one for mobile. I'd recommend simply creating one timeline like i did in my demo. You then add the tween values you like for the appropriate screen size. 

 

Your fork of my demo has some errors.

// tlOne and tlTwo are timelines, not functions
var newAnimation = window.innerWidth < 737 ? tlOne() : tlTwo();

 

If you do want to create separate timelines for each screen size, you can make that work with some changes to your code. This should work.

 

var tlOne = new TimelineMax();
var tlTwo = new TimelineMax();

tlOne.to(".boxTarget", 1, { opacity: ".4", scale: .1, background: "red" });
tlTwo.to(".boxTarget", 1, { opacity: ".8", scale: .8,  background: "yellow" });

var newAnimation = window.innerWidth < 737 ? tlOne : tlTwo;

 

Then in the ScrollMagic code, you use newAnimation like this:

 

  .setTween(newAnimation)

 

You don't need to call any functions to make this work so you can delete that part of your code.

  • Like 1
Link to comment
Share on other sites

2 hours ago, PointC said:

I think you may be overthinking this project. You're trying to create a timeline for desktop and a separate one for mobile. I'd recommend simply creating one timeline like i did in my demo. You then add the tween values you like for the appropriate screen size. 

 

Your fork of my demo has some errors.


// tlOne and tlTwo are timelines, not functions
var newAnimation = window.innerWidth < 737 ? tlOne() : tlTwo();

 

If you do want to create separate timelines for each screen size, you can make that work with some changes to your code. This should work.

 


var tlOne = new TimelineMax();
var tlTwo = new TimelineMax();

tlOne.to(".boxTarget", 1, { opacity: ".4", scale: .1, background: "red" });
tlTwo.to(".boxTarget", 1, { opacity: ".8", scale: .8,  background: "yellow" });

var newAnimation = window.innerWidth < 737 ? tlOne : tlTwo;

 

Then in the ScrollMagic code, you use newAnimation like this:

 


  .setTween(newAnimation)

 

You don't need to call any functions to make this work so you can delete that part of your code.

 

 

Thank you

It works but you have not expected something different

The solution is like a demonstration. It would be but with. I have the problem I can only change one element, as I do to be more elements, I have to make a variable (var = name) for each element.

 

example
var newColor2 = window.innerWidth <737? "0": "0.5";
tl.to (".boxTarget", 1, {opacity: newColor2});
etc, etc...

 

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...