标签: scrollmagic

我正在尝试使用scrollmagic来触发TweenMax动画,但动画开始时不会等待滚动触发器被击中.我在这里错过了什么吗？

$(document).ready(function($) {
  var controller = new ScrollMagic();

  var tween = TweenMax.to('.animateme', 1, {color: "green", scale: 2.5});

  var scene = new ScrollScene({triggerElement: '.trigger'})
    .setTween(tween)
    .addTo(controller);
  scene.addIndicators({zindex: 100});
});

我是ScrollMagic第一次使用，据我所知，我了解如何根据起始元素和持续时间触发我的动画

不能设置结束触发器而不是持续时间吗？

var smcontroller = new ScrollMagic.Controller();
var smscene1 = new ScrollMagic.Scene({
    triggerElement: "#products-box-1", 
    offset: 200, duration: 1600
})
.setTween(tweencan)
.addIndicators()
.addTo(smcontroller);

有没有办法在场景上设置 scrollmagic 持续时间只要场景的高度？我想使用类切换功能，并且某些场景高于视口高度。

<section id="sec1">I'm 400px in height</section>
<section id="sec1">I'm 100% in height (1 viewport)</section>
<section id="sec1">I'm 2500px in height (2,2 viewports)</section>

像素持续时间：{duration: 400}

vh 中的持续时间：{持续时间：'100%'}

元素高度的持续时间：???

感谢您的帮助！

我正在使用ScrollMagic和Greensock创建一个" 滚动到 "功能,用户点击持久导航中的链接,然后将视图滚动到页面下方的指定部分(一个充满内容和图像的长页面) .但是在Safari(v 7.0.1)中,它在大约80%的时间内滚动得很好,其余时间,它会在向下滚动到所选部分时被卡住.它甚至看起来不会卡在页面的某个重要部分,它只是挂在看似随机的页面块之间.

页面上的内容是保密的,因此我无法共享整个页面,但我可以共享驱动它的脚本.我在脚本中做错了什么会导致它在滚动中部分挂起？

$(document).ready(function($) {
                            // build tween
                            var tween1 = new TimelineMax ()
                                .add([
                                    TweenMax.fromTo("#trigger1 .image1", 1, {scale: 1, autoAlpha: 1, top: 1200}, {top: -1630, ease: Linear.easeNone}),
                                    TweenMax.fromTo("#trigger1 .image2", 1, {scale: 1, autoAlpha: 1, top: 1300}, {top: -560, ease: Linear.easeNone}),
                                    TweenMax.fromTo("#trigger1 .image3", 1, {scale: 1, autoAlpha: 1, top: 1200}, {top: -1630, ease: Linear.easeNone}),
                                    TweenMax.fromTo("#trigger1 .image6", 1, {scale: 1, autoAlpha: 1, top: 1200}, {top: -1630, ease: Linear.easeNone}),
                                    TweenMax.fromTo("#trigger1 .image4", 1, {scale: 1, autoAlpha: …

我正在使用Scroll Magic JS.我的目标是使用我的HTML5视频(下面)并使用pin方法使其粘贴在背景中,同时文本滚动到它的顶部.

<video preload="auto" autoplay="autoplay" loop="loop" id="bgvid">
    <source src="../../pictures/coding.mp4" type="video/mp4">
</video>

我的Javascript:

var scene_statement = new ScrollScene({triggerElement: "#trigger5", duration: 400})
                    .setPin("#bgvid")
                    .addTo(controller);

当我不包含javascript时,视频完美运行(显然不会固定),当我在图像而不是视频上使用javascript时,固定效果非常好.

当我在视频中使用javascript时,视频仍会显示,并且它会固定,但它不会播放.有谁知道怎么克服这个？

谢谢

我正在尝试使用GSAP和scrollMagic创建一个简单的timelineMax,我收到以下错误.一切看起来都对我好,所以我不理解这个错误.

Uncaught TypeError: Cannot read property 'repeat' of undefined
d.to @ TweenMax.min.js:14
(anonymous function) @ app.js:12

第12行在.to("#parallax1 > div", {y: "80%", ease: Linear.easeNone});下面.

这是代码:

// init controller
    var controller = new ScrollMagic.Controller({globalSceneOptions: {triggerHook: "onEnter", duration: "200%"}});

    // build scenes
    // build tween1
    var tween1 = new TimelineMax();
        tween1.to("#parallax1 > div", {y: "80%", ease: Linear.easeNone});   

    var scene = new ScrollMagic.Scene({triggerElement: "#parallax1"})
                    .setTween(tween1)
                    .addIndicators()
                    .addTo(controller);

(我知道那个补间中没有持续时间参数,但是如果你看一下http://janpaepke.github.io/ScrollMagic/examples/advanced/parallax_sections.html,你可以看到他们的setTween上没有持续时间参数,它只能工作精细).

所以我一直在使用ScrollMagic.js和GSAP.js，并在向下滚动时将.setClassToggle用于侧面导航的活动状态。

它添加了“活动”类，但不会删除上一个类，直到再次向上滚动然后将其删除。但是演示显示了它双向切换。这是我的代码：

$(function () {

  var controller = new ScrollMagic.Controller();

  new ScrollMagic.Scene({triggerElement: "#Home"})
              .setClassToggle(".side-nav a.home", "active")                
              .addTo(controller);
  new ScrollMagic.Scene({triggerElement: "#Overview"})
              .setClassToggle(".side-nav a.overview", "active")
              .addTo(controller);
});

JS小提琴链接：https : //jsfiddle.net/2sx91ya6/

我正在尝试将Scrollmagic插件与Angular CLI集成.但是,我收到此错误:

./~/ScrollMagic/scrollmagic/minified/plugins/animation.gsap.min.js找不到模块:错误:无法解析'/Users/../project/node_modules/ScrollMagic/scrollmagic/minified/中的'TweenMax'插件

我使用npm安装了GSAP和scrollmagic库:

npm install gsap
npm install scrollmagic

.angular-cli.json

"scripts": [
        "../node_modules/gsap/src/uncompressed/TweenMax.js",
        "../node_modules/scrollmagic/scrollmagic/minified/ScrollMagic.min.js",
        "../node_modules/scrollmagic/scrollmagic/minified/plugins/animation.gsap.min.js",
        "../node_modules/scrollmagic/scrollmagic/minified/plugins/debug.addIndicators.min.js"
      ],

零件

import { Component, OnInit } from '@angular/core';
import { TweenMax, TimelineMax } from "gsap";
import * as ScrollMagic from 'ScrollMagic';
import "ScrollMagic/scrollmagic/minified/plugins/debug.addIndicators.min.js";
import "ScrollMagic/scrollmagic/minified/plugins/animation.gsap.min.js";


@Component({
  selector: 'app-floating-butterfly',
  templateUrl: './floating-butterfly.component.html',
  styleUrls: ['./floating-butterfly.component.scss']
})
export class FloatingButterflyComponent implements OnInit {

  constructor() { }

  ngOnInit() {
    var controller = new ScrollMagic.Controller();
    var scene = new ScrollMagic.Scene({
      triggerElement: ".floating-butterfly"
    })
    .setTween(".floating-butterfly", 0.5, {backgroundColor: "green", scale: …

如何在我的ReactJS项目中包含ScrollMagic的Greensock插件？

ScrollMagic的作者制作了插件来整合像GreenSock和Velocity这样的库.当你将它们简单地包含在你的HTML文档中时,这些工作非常有用

<script type="text/javascript" src="js/lib/greensock/TweenMax.min.js"></script>
<script type="text/javascript" src="scrollmagic/uncompressed/ScrollMagic.js"></script>
<script type="text/javascript" src="scrollmagic/uncompressed/plugins/animation.gsap.js"></script>

但是当你在ReactJS中时,你不会像这样导入javascript资源.实际上你必须通过像npm命令这样的进程导入它们,然后在你的反应项目中声明它们

import ScrollMagic from "scrollmagic"

虽然我能够将ScrollMagic导入反应文件并开始使用scrollmagic,但我无法导入greensock插件.没有关于如何执行此操作的文档.我试图通过在animation.gsap.js中获取代码段并将其粘贴到node_modules/scrollmagic/scrollmagic.js文件中来破解事物(这不是编辑这些文件的好主意),但它要么破坏了webpack编译器,要么打破了我的项目码.

如何在反应环境中使用greensock插件进行scrollmagic？

我对使用Scrollmagic的GSAP感到很陌生，他试图在一个场景中进行多个补间，但是无法弄清楚如何最终完成了3个这样的场景。

            // init controller
            var controller = new ScrollMagic.Controller();

            // build scene
            var scene1 = new ScrollMagic.Scene({
                triggerElement: "#trigger1"
            })
            .setTween("#animate1", 0.4, {
                opacity: 1, 
                left: 0
            })
            .reverse(false)

            var scene2 = new ScrollMagic.Scene({
                triggerElement: "#trigger1"
            })
            .setTween("#animate2", 0.4, {
                opacity: 1, 
                left: 0,
                delay: .4
            })
            .reverse(false)

            var scene3 = new ScrollMagic.Scene({
                triggerElement: "#trigger1"
            })
            .setTween("#animate3", 0.4, {
                opacity: 1, 
                left: 0,
                delay: .8
            })
            .reverse(false)

            //.addTo(controller);
            controller.addScene([
                scene1,
                scene2,
                scene3
            ]);

有没有一种方法可以简化此代码？我希望添加更多内容，但是我觉得写这个内容的方法很短？

提前致谢！

最终代码

            var timeline = new …