GSAP 将所有选定的 DOM 元素添加到一个对象中，并使用 ScrollTrigger 为它们设置动画

如何解决GSAP 将所有选定的 DOM 元素添加到一个对象中，并使用 ScrollTrigger 为它们设置动画

我什至不知道如何解释我的问题，我缺乏词汇量。我认为这是非常简单的事情，我想在 animParams 函数中使用 init() 对象的一部分，但我只是不知道如何“粘贴它” 在那里。

对不起，如果这段代码看起来很难看，我只是在学习 JS。

这里的整个目标是让一个对象具有不同的 DOM 标识符，并且动画参数属于它。 H1 有一组参数，P 有另一个，依此类推。但我不知道如何将对象的那部分传递给循环。

const scrollContainer = document.querySelector("[data-scroll-container]");

const animParams = [{
  type: 'h1',from: {
    x: '-=200',autoAlpha: 0
  },to: {
    duration: 1.25,x: 0,autoAlpha: 1,ease: "expo",overwrite: "auto"
  }
}];

function init() {
  for (const objects of Object.keys(animParams)) {
    gsap.utils.toArray(animParams[objects].type).forEach(function(domobject) {
      
     ScrollTrigger.create({
        trigger: domobject,scroller: scrollContainer,onEnter: function() {
          gsap.fromTo(domobject,{
            // I guess I'm doings something very dumb.
            Object.keys(animParams[objects].to)
            // I don't kNow how to include the part of the Object to here...
            // I'm getting this error message: Uncaught SyntaxError: Unexpected token '.' 
            // But I think I'm doing something fundamentally wrong. 
          });
        }
      });
    });
  }
};

Codepen

解决方法

好的，现在我知道我做错了什么。

我的对象并不是真正的对象，而是数组中的对象。
我对如何包含对象过于复杂，试图添加一个反对一个对象（如果我理解正确的话）。

无论如何，现在它可以工作了。如果有人正在寻找有关如何使用 GSAP 动态设置 DOM 元素动画的解决方案，我将其留在这里。（比如在滚动期间进入或离开视口时添加所有 H1、P、.randomclass 等 DOM 元素。）

（我只包括了重要的部分，没有包括 init 调用、注册 GSAP 等。）

const animParams = {
  0: {
    type: "h1",from: {
      x: "-=200",autoAlpha: 0
    },to: {
      duration: 1.25,x: 0,autoAlpha: 1,ease: "expo",overwrite: "auto"
    }
  }
};

function init() {
  var i = 0;
  for (var key in animParams) {
    let targets = gsap.utils.toArray(animParams[i].type);
    targets.forEach(function (domobject) {
      let from = animParams[i].from;
      let to = animParams[i].to;
      ScrollTrigger.create({
        trigger: domobject,onEnter: function () {
          gsap.fromTo(domobject,from,to);
        },onEnterBack: function () {
          gsap.fromTo(domobject,onLeave: function () {
          gsap.set(domobject,from);
        }
      });
    });
    i++;
  }
}